/* Dcodz theme 1.6.8 — built by bin/build-css.sh from 14 source files. Do not edit; edit the sources and rebuild. */

/* ===== variables.css ===== */
:root {
--color-blue: #2264F5;
--color-blue-light: #5a8bf7;
--color-blue-lighter: #92b2fa;
--color-blue-dark: #1a4fc4;
--color-blue-darker: #133b93;
--color-blue-50: rgba(34, 100, 245, 0.05);
--color-blue-100: rgba(34, 100, 245, 0.1);
--color-blue-200: rgba(34, 100, 245, 0.2);
--color-pink: #FC0196;
--color-pink-light: #fd4db5;
--color-pink-lighter: #fe99d4;
--color-pink-dark: #ca0178;
--color-pink-darker: #97015a;
--color-pink-50: rgba(252, 1, 150, 0.05);
--color-pink-100: rgba(252, 1, 150, 0.1);
--color-pink-200: rgba(252, 1, 150, 0.2);
--color-purple: #390977;
--color-purple-light: #5a2da0;
--color-purple-lighter: #8058c4;
--color-purple-dark: #2a065a;
--color-purple-darker: #1c043d;
--color-purple-50: rgba(57, 9, 119, 0.05);
--color-purple-100: rgba(57, 9, 119, 0.1);
--color-purple-200: rgba(57, 9, 119, 0.2);
--color-yellow: #ffbe00;
--color-yellow-light: #ffd24d;
--color-yellow-lighter: #ffe699;
--color-yellow-dark: #cc9800;
--color-yellow-darker: #997200;
--color-yellow-50: rgba(255, 190, 0, 0.05);
--color-yellow-100: rgba(255, 190, 0, 0.1);
--color-yellow-200: rgba(255, 190, 0, 0.2);
--color-dark: #3a3a3a;
--color-dark-light: #555555;
--color-dark-lighter: #777777;
--color-dark-darker: #1a1a1a;
--color-light: #F5F5F5;
--color-light-dark: #e8e8e8;
--color-light-darker: #d0d0d0;
--color-white: #ffffff;
--color-black: #000000;
--color-success: #22c55e;
--color-error: #ef4444;
--color-warning: #f59e0b;
--color-info: #2264F5;
--color-whatsapp: #25D366;
--color-phone: #2264F5;
--gradient-hero: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 100%);
--gradient-hero-reverse: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
--gradient-ai: linear-gradient(160deg, var(--color-purple-darker) 0%, var(--color-purple) 50%, var(--color-blue-dark) 100%);
--gradient-cta: linear-gradient(135deg, var(--color-yellow) 0%, var(--color-yellow-dark) 100%);
--gradient-stats: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
--gradient-lead-magnet: linear-gradient(135deg, var(--color-purple) 0%, var(--color-purple-dark) 100%);
--space-1: 0.25rem;   
--space-2: 0.5rem;    
--space-3: 0.75rem;   
--space-4: 1rem;      
--space-5: 1.25rem;   
--space-6: 1.5rem;    
--space-8: 2rem;      
--space-10: 2.5rem;   
--space-12: 3rem;     
--space-16: 4rem;     
--space-20: 5rem;     
--space-24: 6rem;     
--space-32: 8rem;     
--font-display: 'Boogaloo', cursive;
--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
--font-mono: 'Fira Code', 'Cascadia Code', Consolas, monospace;
--font-arabic: 'Noto Kufi Arabic', var(--font-body);
--text-xs: clamp(0.6875rem, 0.65rem + 0.15vw, 0.75rem);         
--text-sm: clamp(0.8125rem, 0.775rem + 0.15vw, 0.875rem);       
--text-base: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);           
--text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);           
--text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);           
--text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);             
--text-2xl: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);                
--text-3xl: clamp(1.875rem, 1.6rem + 1.1vw, 2.5rem);            
--text-4xl: clamp(2.25rem, 1.85rem + 1.6vw, 3rem);              
--text-5xl: clamp(2.75rem, 2.2rem + 2.2vw, 3.75rem);            
--text-6xl: clamp(3.25rem, 2.5rem + 3vw, 4.5rem);               
--leading-none: 1;
--leading-tight: 1.15;
--leading-snug: 1.3;
--leading-normal: 1.6;
--leading-relaxed: 1.75;
--weight-light: 300;
--weight-regular: 400;
--weight-medium: 500;
--weight-semibold: 600;
--weight-bold: 700;
--weight-extrabold: 800;
--tracking-tight: -0.02em;
--tracking-normal: 0;
--tracking-wide: 0.02em;
--tracking-wider: 0.05em;
--tracking-widest: 0.1em;
--radius-sm: 0.25rem;   
--radius-md: 0.5rem;    
--radius-lg: 0.75rem;   
--radius-xl: 1rem;      
--radius-2xl: 1.5rem;   
--radius-full: 9999px;
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
--shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
--shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
--shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15);
--shadow-card: 0 2px 8px rgba(0, 0, 0, 0.08);
--shadow-card-hover: 0 12px 24px rgba(0, 0, 0, 0.12);
--shadow-glow-blue: 0 0 20px rgba(34, 100, 245, 0.3);
--shadow-glow-pink: 0 0 20px rgba(252, 1, 150, 0.3);
--shadow-glow-purple: 0 0 20px rgba(57, 9, 119, 0.3);
--shadow-glow-yellow: 0 0 20px rgba(255, 190, 0, 0.3);
--shadow-btn: 0 4px 12px rgba(0, 0, 0, 0.15);
--shadow-btn-hover: 0 6px 20px rgba(0, 0, 0, 0.2);
--transition-fast: 150ms ease;
--transition-base: 250ms ease;
--transition-slow: 400ms ease;
--transition-slower: 600ms ease;
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--z-below: -1;
--z-base: 0;
--z-raised: 10;
--z-dropdown: 100;
--z-sticky: 200;
--z-header: 300;
--z-overlay: 400;
--z-modal: 500;
--z-popover: 600;
--z-toast: 700;
--z-floating-btn: 800;
--z-max: 9999;
--container-max: 1280px;
--container-narrow: 960px;
--container-wide: 1440px;
--container-padding: var(--space-4);
--header-height: 80px;
--header-height-scrolled: 60px;
}

/* ===== base.css ===== */
@font-face {
font-family: 'Boogaloo';
src: url('../fonts/Boogaloo-Regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Inter';
src: url('../fonts/Inter-variable.woff2') format('woff2-variations');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
scroll-behavior: smooth;
scroll-padding-block-start: var(--header-height);
}
body {
min-height: 100vh;
font-family: var(--font-body);
font-size: var(--text-base);
line-height: var(--leading-normal);
color: var(--color-dark);
background-color: var(--color-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-x: clip;
}
html {
overflow-x: hidden;
overflow-x: clip;
}
.site-main {
overflow-x: clip;
}
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
fieldset,
pre {
margin: 0;
}
ul,
ol {
list-style: none;
padding: 0;
margin: 0;
}
body,
h1, h2, h3, h4, h5, h6,
p {
overflow-wrap: break-word;
}
img,
picture,
video,
canvas,
svg {
display: block;
max-inline-size: 100%;
height: auto;
}
input,
button,
textarea,
select {
font: inherit;
color: inherit;
}
button {
cursor: pointer;
background: none;
border: none;
padding: 0;
}
a {
color: var(--color-blue);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--color-blue-dark);
}
a:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
table {
border-collapse: collapse;
border-spacing: 0;
inline-size: 100%;
}
iframe {
border: 0;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
}
[hidden] {
display: none !important;
}
.sr-only {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
font-family: var(--font-display);
font-weight: var(--weight-regular);
line-height: var(--leading-tight);
color: var(--color-dark-darker);
letter-spacing: var(--tracking-tight);
}
h1, .h1 {
font-size: var(--text-5xl);
margin-block-end: var(--space-6);
}
h2, .h2 {
font-size: var(--text-4xl);
margin-block-end: var(--space-5);
}
h3, .h3 {
font-size: var(--text-3xl);
margin-block-end: var(--space-4);
}
h4, .h4 {
font-size: var(--text-2xl);
margin-block-end: var(--space-3);
}
h5, .h5 {
font-size: var(--text-xl);
margin-block-end: var(--space-3);
}
h6, .h6 {
font-size: var(--text-lg);
margin-block-end: var(--space-2);
}
p {
margin-block-end: var(--space-4);
line-height: var(--leading-normal);
}
p:last-child {
margin-block-end: 0;
}
.text-lead {
font-size: var(--text-lg);
line-height: var(--leading-relaxed);
color: var(--color-dark-light);
}
.text-small {
font-size: var(--text-sm);
}
.text-xs {
font-size: var(--text-xs);
}
.text-mono {
font-family: var(--font-mono);
font-size: 0.9em;
}
.text-white { color: var(--color-white); }
.text-blue { color: var(--color-blue); }
.text-purple { color: var(--color-purple); }
.text-yellow { color: var(--color-yellow); }
.text-muted { color: var(--color-dark-lighter); }
.text-center { text-align: center; }
.text-start { text-align: start; }
.text-end { text-align: end; }
.font-light { font-weight: var(--weight-light); }
.font-regular { font-weight: var(--weight-regular); }
.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold { font-weight: var(--weight-bold); }
.section-title {
font-size: var(--text-4xl);
text-align: center;
margin-block-end: var(--space-4);
}
.section-subtitle {
font-size: var(--text-lg);
text-align: center;
color: var(--color-dark-lighter);
max-inline-size: 640px;
margin-inline: auto;
margin-block-end: var(--space-12);
line-height: var(--leading-relaxed);
}
strong, b {
font-weight: var(--weight-bold);
}
em, i {
font-style: italic;
}
small {
font-size: var(--text-sm);
}
mark {
background-color: var(--color-yellow-lighter);
color: var(--color-dark);
padding-inline: var(--space-1);
border-radius: var(--radius-sm);
}
code {
font-family: var(--font-mono);
font-size: 0.875em;
background-color: var(--color-light);
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
border: 1px solid var(--color-light-dark);
}
pre {
font-family: var(--font-mono);
font-size: var(--text-sm);
background-color: var(--color-dark-darker);
color: var(--color-light);
padding: var(--space-6);
border-radius: var(--radius-lg);
overflow-x: auto;
margin-block-end: var(--space-6);
}
pre code {
background: none;
border: none;
padding: 0;
font-size: inherit;
color: inherit;
}
blockquote {
border-inline-start: 4px solid var(--color-blue);
padding-inline-start: var(--space-6);
padding-block: var(--space-2);
font-style: italic;
color: var(--color-dark-light);
margin-block-end: var(--space-6);
}
hr {
border: none;
border-block-start: 1px solid var(--color-light-dark);
margin-block: var(--space-8);
}
::selection {
background-color: var(--color-blue);
color: var(--color-white);
}
::-moz-selection {
background-color: var(--color-blue);
color: var(--color-white);
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--color-light);
}
::-webkit-scrollbar-thumb {
background: var(--color-blue-light);
border-radius: var(--radius-full);
border: 2px solid var(--color-light);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-blue);
}
* {
scrollbar-width: thin;
scrollbar-color: var(--color-blue-light) var(--color-light);
}
:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 2px;
}
:focus:not(:focus-visible) {
outline: none;
}
.ai-card__icon svg,
.mvp-phase__icon svg,
.service-card__icon svg,
.odoo-module-card__icon svg,
.process-step__icon svg,
.odoo-erp__badge-icon {
width: 48px;
height: 48px;
max-width: 100%;
}

/* ===== layout.css ===== */
.container {
inline-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.container--narrow {
max-inline-size: var(--container-narrow);
}
.container--wide {
max-inline-size: var(--container-wide);
}
.container--full {
max-inline-size: none;
}
.grid {
display: grid;
gap: var(--space-6);
}
.grid-2 {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
.grid-3 {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
.grid-4 {
display: grid;
gap: var(--space-6);
grid-template-columns: 1fr;
}
.grid--center {
align-items: center;
}
.grid--start {
align-items: start;
}
.grid--stretch {
align-items: stretch;
}
.gap-sm { gap: var(--space-3); }
.gap-md { gap: var(--space-6); }
.gap-lg { gap: var(--space-10); }
.gap-xl { gap: var(--space-16); }
.flex {
display: flex;
}
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-between {
display: flex;
align-items: center;
justify-content: space-between;
}
.flex-column {
display: flex;
flex-direction: column;
}
.flex-wrap {
display: flex;
flex-wrap: wrap;
}
.flex-start {
display: flex;
align-items: flex-start;
}
.flex-end {
display: flex;
align-items: flex-end;
}
.flex-gap-sm { gap: var(--space-2); }
.flex-gap-md { gap: var(--space-4); }
.flex-gap-lg { gap: var(--space-6); }
.flex-1 { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-end { align-items: flex-end; }
.align-stretch { align-items: stretch; }
.justify-center { justify-content: center; }
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.section-padding {
padding-block: var(--space-16);
}
.section-padding-sm {
padding-block: var(--space-10);
}
.section-padding-lg {
padding-block: var(--space-24);
}
.mt-0 { margin-block-start: 0; }
.mt-4 { margin-block-start: var(--space-4); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-8 { margin-block-start: var(--space-8); }
.mt-12 { margin-block-start: var(--space-12); }
.mb-0 { margin-block-end: 0; }
.mb-4 { margin-block-end: var(--space-4); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-8 { margin-block-end: var(--space-8); }
.mb-12 { margin-block-end: var(--space-12); }
.mx-auto { margin-inline: auto; }
.pt-0 { padding-block-start: 0; }
.pb-0 { padding-block-end: 0; }
.px-4 { padding-inline: var(--space-4); }
.py-4 { padding-block: var(--space-4); }
.py-8 { padding-block: var(--space-8); }
.w-full { inline-size: 100%; }
.w-auto { inline-size: auto; }
.max-w-sm { max-inline-size: 480px; }
.max-w-md { max-inline-size: 640px; }
.max-w-lg { max-inline-size: 800px; }
.max-w-xl { max-inline-size: 960px; }
.block { display: block; }
.inline-block { display: inline-block; }
.inline { display: inline; }
.hidden { display: none; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }
.overflow-hidden { overflow: hidden; }
.overflow-auto { overflow: auto; }
.bg-white { background-color: var(--color-white); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark); }
.bg-blue { background-color: var(--color-blue); }
.bg-purple { background-color: var(--color-purple); }
.bg-yellow { background-color: var(--color-yellow); }

/* ===== components.css ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-6);
font-family: var(--font-body);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
line-height: var(--leading-snug);
text-align: center;
text-decoration: none;
border: 2px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast),
color var(--transition-fast);
white-space: nowrap;
user-select: none;
position: relative;
overflow: hidden;
}
.btn:focus-visible {
outline: 2px solid var(--color-blue);
outline-offset: 2px;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-btn-hover);
}
.btn:active {
transform: translateY(0);
box-shadow: var(--shadow-xs);
}
.btn:disabled,
.btn[disabled] {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.btn-primary {
background-color: var(--color-yellow);
color: var(--color-dark-darker);
border-color: var(--color-yellow);
box-shadow: var(--shadow-btn);
}
.btn-primary:hover {
background-color: var(--color-yellow-dark);
border-color: var(--color-yellow-dark);
color: var(--color-dark-darker);
}
.btn-secondary {
background-color: var(--color-blue);
color: var(--color-white);
border-color: var(--color-blue);
box-shadow: var(--shadow-btn);
}
.btn-secondary:hover {
background-color: var(--color-blue-dark);
border-color: var(--color-blue-dark);
color: var(--color-white);
}
.btn-outline {
background-color: transparent;
color: var(--color-blue);
border-color: var(--color-blue);
}
.btn-outline:hover {
background-color: var(--color-blue);
color: var(--color-white);
}
.btn-outline-white {
background-color: transparent;
color: var(--color-white);
border-color: var(--color-white);
}
.btn-outline-white:hover {
background-color: var(--color-white);
color: var(--color-dark);
}
.btn-ghost {
background-color: transparent;
color: var(--color-blue);
border-color: transparent;
}
.btn-ghost:hover {
background-color: var(--color-blue-50);
color: var(--color-blue-dark);
}
.btn-sm {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
}
.btn-lg {
padding: var(--space-4) var(--space-8);
font-size: var(--text-lg);
border-radius: var(--radius-lg);
}
.btn-xl {
padding: var(--space-5) var(--space-10);
font-size: var(--text-xl);
border-radius: var(--radius-lg);
}
.btn-icon {
padding: var(--space-3);
border-radius: var(--radius-md);
}
.btn-icon svg,
.btn-icon img {
inline-size: 1.25em;
block-size: 1.25em;
}
.btn-block {
display: flex;
inline-size: 100%;
}
.card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
position: relative;
overflow: hidden;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.card--flat {
box-shadow: none;
border: 1px solid var(--color-light-dark);
}
.card--flat:hover {
box-shadow: var(--shadow-md);
border-color: transparent;
}
.card--bordered {
border: 1px solid var(--color-light-dark);
}
.card__image {
margin: calc(-1 * var(--space-8));
margin-block-end: var(--space-6);
overflow: hidden;
}
.card__image img {
inline-size: 100%;
block-size: auto;
object-fit: cover;
}
.card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 56px;
block-size: 56px;
border-radius: var(--radius-lg);
background-color: var(--color-blue-50);
color: var(--color-blue);
margin-block-end: var(--space-4);
font-size: 1.5rem;
flex-shrink: 0;
}
.card__icon svg {
inline-size: 28px;
block-size: 28px;
}
.card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-3);
}
.card__text {
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
}
.card__footer {
margin-block-start: var(--space-6);
padding-block-start: var(--space-4);
border-block-start: 1px solid var(--color-light-dark);
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
border-radius: var(--radius-full);
line-height: var(--leading-snug);
}
.badge-primary {
background-color: var(--color-yellow);
color: var(--color-dark-darker);
}
.badge-blue {
background-color: var(--color-blue-100);
color: var(--color-blue-dark);
}
.badge-purple {
background-color: var(--color-purple-100);
color: var(--color-purple);
}
.badge-success {
background-color: rgba(34, 197, 94, 0.1);
color: #16a34a;
}
.badge-outline {
background-color: transparent;
border: 1px solid currentColor;
}
.form-group {
margin-block-end: var(--space-5);
}
.form-label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark);
margin-block-end: var(--space-2);
}
.form-label--required::after {
content: ' *';
color: var(--color-error);
}
.form-input,
.form-textarea,
.form-select {
display: block;
inline-size: 100%;
padding: var(--space-3) var(--space-4);
font-family: var(--font-body);
font-size: var(--text-base);
color: var(--color-dark);
background-color: var(--color-white);
border: 2px solid var(--color-light-dark);
border-radius: var(--radius-md);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
appearance: none;
}
.form-input:hover,
.form-textarea:hover,
.form-select:hover {
border-color: var(--color-dark-lighter);
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--color-blue);
box-shadow: 0 0 0 3px var(--color-blue-200);
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--color-dark-lighter);
opacity: 1;
}
.form-textarea {
min-block-size: 120px;
resize: vertical;
}
.form-select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%233a3a3a' d='M6 8.825a.5.5 0 0 1-.354-.146l-4-4a.5.5 0 0 1 .708-.708L6 7.617l3.646-3.646a.5.5 0 0 1 .708.708l-4 4A.5.5 0 0 1 6 8.825z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: inline-end var(--space-4) center;
padding-inline-end: var(--space-10);
}
.form-input--error,
.form-textarea--error,
.form-select--error {
border-color: var(--color-error);
}
.form-input--error:focus,
.form-textarea--error:focus,
.form-select--error:focus {
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.form-input--success,
.form-textarea--success,
.form-select--success {
border-color: var(--color-success);
}
.form-error {
display: block;
font-size: var(--text-sm);
color: var(--color-error);
margin-block-start: var(--space-1);
}
.form-hint {
display: block;
font-size: var(--text-sm);
color: var(--color-dark-lighter);
margin-block-start: var(--space-1);
}
.form-input-group {
position: relative;
}
.form-input-group .form-input {
padding-inline-start: var(--space-10);
}
.form-input-group__icon {
position: absolute;
inset-inline-start: var(--space-3);
inset-block-start: 50%;
transform: translateY(-50%);
color: var(--color-dark-lighter);
pointer-events: none;
}
.form-checkbox {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
position: relative;
}
.form-checkbox input[type="checkbox"] {
position: absolute;
opacity: 0;
inline-size: 0;
block-size: 0;
}
.form-checkbox__mark {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
inline-size: 20px;
block-size: 20px;
border: 2px solid var(--color-light-dark);
border-radius: var(--radius-sm);
background-color: var(--color-white);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
margin-block-start: 2px;
}
.form-checkbox input[type="checkbox"]:checked + .form-checkbox__mark {
background-color: var(--color-blue);
border-color: var(--color-blue);
}
.form-checkbox input[type="checkbox"]:checked + .form-checkbox__mark::after {
content: '';
display: block;
inline-size: 5px;
block-size: 10px;
border: solid var(--color-white);
border-width: 0 2px 2px 0;
transform: rotate(45deg);
margin-block-start: -2px;
}
.form-checkbox input[type="checkbox"]:focus-visible + .form-checkbox__mark {
box-shadow: 0 0 0 3px var(--color-blue-200);
}
.form-checkbox__label {
font-size: var(--text-base);
color: var(--color-dark);
line-height: var(--leading-normal);
}
.form-radio {
display: flex;
align-items: flex-start;
gap: var(--space-3);
cursor: pointer;
position: relative;
}
.form-radio input[type="radio"] {
position: absolute;
opacity: 0;
inline-size: 0;
block-size: 0;
}
.form-radio__mark {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
inline-size: 20px;
block-size: 20px;
border: 2px solid var(--color-light-dark);
border-radius: var(--radius-full);
background-color: var(--color-white);
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
margin-block-start: 2px;
}
.form-radio input[type="radio"]:checked + .form-radio__mark {
border-color: var(--color-blue);
}
.form-radio input[type="radio"]:checked + .form-radio__mark::after {
content: '';
display: block;
inline-size: 10px;
block-size: 10px;
border-radius: var(--radius-full);
background-color: var(--color-blue);
}
.form-radio input[type="radio"]:focus-visible + .form-radio__mark {
box-shadow: 0 0 0 3px var(--color-blue-200);
}
.form-radio__label {
font-size: var(--text-base);
color: var(--color-dark);
line-height: var(--leading-normal);
}
.progress-bar {
display: flex;
align-items: center;
justify-content: space-between;
margin-block-end: var(--space-8);
position: relative;
}
.progress-bar::before {
content: '';
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
inline-size: 100%;
block-size: 3px;
background-color: var(--color-light-dark);
transform: translateY(-50%);
z-index: var(--z-base);
}
.progress-bar__fill {
position: absolute;
inset-block-start: 50%;
inset-inline-start: 0;
block-size: 3px;
background-color: var(--color-blue);
transform: translateY(-50%);
z-index: var(--z-base);
transition: inline-size var(--transition-slow);
}
.progress-bar__step {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
position: relative;
z-index: var(--z-raised);
}
.progress-bar__circle {
display: flex;
align-items: center;
justify-content: center;
inline-size: 36px;
block-size: 36px;
border-radius: var(--radius-full);
background-color: var(--color-white);
border: 3px solid var(--color-light-dark);
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-dark-lighter);
transition:
background-color var(--transition-base),
border-color var(--transition-base),
color var(--transition-base);
}
.progress-bar__step--active .progress-bar__circle {
border-color: var(--color-blue);
color: var(--color-blue);
}
.progress-bar__step--completed .progress-bar__circle {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: var(--color-white);
}
.progress-bar__label {
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-dark-lighter);
text-align: center;
white-space: nowrap;
}
.progress-bar__step--active .progress-bar__label,
.progress-bar__step--completed .progress-bar__label {
color: var(--color-blue);
}
.divider {
display: flex;
align-items: center;
gap: var(--space-4);
margin-block: var(--space-6);
color: var(--color-dark-lighter);
font-size: var(--text-sm);
}
.divider::before,
.divider::after {
content: '';
flex: 1;
block-size: 1px;
background-color: var(--color-light-dark);
}
[data-tooltip] {
position: relative;
}
[data-tooltip]::after {
content: attr(data-tooltip);
position: absolute;
inset-block-end: calc(100% + 8px);
inset-inline-start: 50%;
transform: translateX(-50%);
padding: var(--space-2) var(--space-3);
background-color: var(--color-dark-darker);
color: var(--color-white);
font-size: var(--text-xs);
border-radius: var(--radius-sm);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition:
opacity var(--transition-fast),
visibility var(--transition-fast);
pointer-events: none;
z-index: var(--z-popover);
}
[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
.btn--primary { background-color: var(--color-yellow); color: var(--color-dark-darker); border-color: var(--color-yellow); box-shadow: var(--shadow-btn); }
.btn--primary:hover { background-color: var(--color-yellow-dark); border-color: var(--color-yellow-dark); color: var(--color-dark-darker); }
.btn--secondary { background-color: var(--color-blue); color: var(--color-white); border-color: var(--color-blue); box-shadow: var(--shadow-btn); }
.btn--secondary:hover { background-color: var(--color-blue-dark); border-color: var(--color-blue-dark); color: var(--color-white); }
.btn--outline { background-color: transparent; color: var(--color-blue); border-color: var(--color-blue); }
.btn--outline:hover { background-color: var(--color-blue); color: var(--color-white); }
.btn--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); border-radius: var(--radius-lg); }
.btn--cta { background-color: var(--color-yellow); color: var(--color-dark-darker); border-color: var(--color-yellow); box-shadow: var(--shadow-btn); }
.btn--cta:hover { background-color: var(--color-yellow-dark); border-color: var(--color-yellow-dark); }
.btn--dark { background-color: var(--color-dark-darker); color: var(--color-white); border-color: var(--color-dark-darker); }
.btn--dark:hover { background-color: var(--color-dark); border-color: var(--color-dark); color: var(--color-white); }
.btn--outline-dark { background-color: transparent; color: var(--color-dark-darker); border-color: var(--color-dark-darker); }
.btn--outline-dark:hover { background-color: var(--color-dark-darker); color: var(--color-white); }
.btn--yellow { background-color: var(--color-yellow); color: var(--color-dark-darker); border-color: var(--color-yellow); }
.btn--yellow:hover { background-color: var(--color-yellow-dark); border-color: var(--color-yellow-dark); }
.social-icons {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
}
.social-icon {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-full);
background-color: var(--color-light);
color: var(--color-dark);
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
}
.social-icon:hover {
background-color: var(--color-blue);
color: var(--color-white);
transform: translateY(-2px);
}
.social-icon svg {
inline-size: 18px;
block-size: 18px;
}
.site-footer .social-icon {
background-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.6);
}
.site-footer .social-icon:hover {
background-color: var(--color-blue);
color: var(--color-white);
}

/* ===== header.css ===== */
.site-header {
position: fixed;
inset-block-start: 0;
inset-inline: 0;
z-index: var(--z-header);
block-size: var(--header-height);
background-color: #ffffff;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-block-end: 1px solid rgba(0, 0, 0, 0.06);
transition:
block-size var(--transition-base),
background-color var(--transition-base),
backdrop-filter var(--transition-base),
box-shadow var(--transition-base);
}
.site-header.header--scrolled {
block-size: var(--header-height-scrolled);
background-color: #ffffff;
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
box-shadow: var(--shadow-md);
}
.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
block-size: 100%;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.site-logo {
display: flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
z-index: calc(var(--z-header) + 1);
}
.site-logo .custom-logo-link {
display: flex;
align-items: center;
}
.site-logo__image,
.site-logo img,
.custom-logo {
block-size: 56px;
inline-size: auto;
object-fit: contain;
transition: block-size var(--transition-base);
}
.header--scrolled .site-logo__image,
.header--scrolled .site-logo img,
.header--scrolled .custom-logo {
block-size: 44px;
}
.site-logo__text {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-blue);
margin-inline-start: var(--space-2);
line-height: 1;
}
.site-nav {
display: none;
align-items: center;
gap: var(--space-1);
}
.site-nav__link {
position: relative;
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark);
text-decoration: none;
border-radius: var(--radius-md);
transition:
color var(--transition-fast),
background-color var(--transition-fast);
}
.site-nav__link:hover {
color: var(--color-blue);
background-color: var(--color-blue-50);
}
.site-nav__link--active {
color: var(--color-blue);
}
.site-nav__link::after {
content: '';
position: absolute;
inset-inline-start: var(--space-3);
inset-inline-end: var(--space-3);
inset-block-end: 0;
block-size: 2px;
background-color: var(--color-blue);
border-radius: var(--radius-full);
transform: scaleX(0);
transform-origin: center;
transition: transform var(--transition-base) var(--ease-out-expo);
}
.site-nav__link:hover::after,
.site-nav__link--active::after {
transform: scaleX(1);
}
.site-nav__dropdown {
position: relative;
}
.site-nav__dropdown-menu {
position: absolute;
inset-block-start: 100%;
inset-inline-start: 0;
min-inline-size: 220px;
padding: var(--space-2);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
border: 1px solid rgba(0, 0, 0, 0.06);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition:
opacity var(--transition-fast),
visibility var(--transition-fast),
transform var(--transition-fast);
z-index: var(--z-dropdown);
}
.site-nav__dropdown:hover .site-nav__dropdown-menu,
.site-nav__dropdown:focus-within .site-nav__dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-nav__dropdown-link {
display: block;
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
color: var(--color-dark);
border-radius: var(--radius-md);
transition:
color var(--transition-fast),
background-color var(--transition-fast);
}
.site-nav__dropdown-link:hover {
color: var(--color-blue);
background-color: var(--color-blue-50);
}
.header-actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.header-cta {
display: none;
}
.site-header__brand {
display: flex;
align-items: center;
flex-shrink: 0;
z-index: calc(var(--z-header) + 1);
}
.lang-switcher {
position: relative;
display: flex;
align-items: center;
background-color: var(--color-light);
border-radius: var(--radius-full);
padding: var(--space-1);
gap: 0;
}
.lang-switcher__toggle {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-dark-lighter);
border-radius: var(--radius-full);
border: none;
background: var(--color-white);
cursor: pointer;
box-shadow: var(--shadow-xs);
line-height: var(--leading-snug);
}
.lang-switcher__dropdown {
position: absolute;
inset-block-start: 100%;
inset-inline-end: 0;
margin-block-start: var(--space-2);
padding: var(--space-2);
background-color: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
list-style: none;
opacity: 0;
visibility: hidden;
transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.lang-switcher__toggle[aria-expanded="true"] + .lang-switcher__dropdown {
opacity: 1;
visibility: visible;
}
.lang-switcher__dropdown li a {
display: block;
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
color: var(--color-dark);
text-decoration: none;
border-radius: var(--radius-sm);
}
.lang-switcher__dropdown li a:hover {
background-color: var(--color-blue-50);
color: var(--color-blue);
}
.lang-switcher__btn {
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-dark-lighter);
border-radius: var(--radius-full);
border: none;
background: none;
cursor: pointer;
transition:
color var(--transition-fast),
background-color var(--transition-fast);
line-height: var(--leading-snug);
}
.lang-switcher__btn:hover {
color: var(--color-dark);
}
.lang-switcher__btn--active {
background-color: var(--color-white);
color: var(--color-blue);
box-shadow: var(--shadow-xs);
}
.hamburger,
.site-header__hamburger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
inline-size: 40px;
block-size: 40px;
padding: 0;
background: none;
border: none;
cursor: pointer;
z-index: calc(var(--z-header) + 1);
border-radius: var(--radius-md);
transition: background-color var(--transition-fast);
}
.hamburger:hover,
.site-header__hamburger:hover {
background-color: var(--color-light);
}
.hamburger__line,
.hamburger-line {
display: block;
inline-size: 22px;
block-size: 2px;
background-color: var(--color-dark);
border-radius: var(--radius-full);
transition:
transform var(--transition-base),
opacity var(--transition-base);
}
.hamburger__line + .hamburger__line,
.hamburger-line + .hamburger-line {
margin-block-start: 5px;
}
.hamburger--active .hamburger__line:nth-child(1),
.hamburger--active .hamburger-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.hamburger--active .hamburger__line:nth-child(2),
.hamburger--active .hamburger-line:nth-child(2) {
opacity: 0;
}
.hamburger--active .hamburger__line:nth-child(3),
.hamburger--active .hamburger-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
.mobile-nav,
.mobile-menu {
position: fixed;
inset: 0;
z-index: var(--z-header);
background-color: var(--color-white);
padding-block-start: calc(var(--header-height) + var(--space-4));
padding-inline: var(--container-padding);
padding-block-end: var(--space-8);
overflow-y: auto;
transform: translateX(100%);
visibility: hidden;
transition:
transform 400ms var(--ease-out-expo),
visibility 0s linear 400ms;
}
.mobile-nav--open,
.mobile-menu[aria-hidden="false"] {
transform: translateX(0);
visibility: visible;
transition:
transform 400ms var(--ease-out-expo),
visibility 0s;
}
.mobile-nav__link {
display: block;
padding: var(--space-4) 0;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-dark);
text-decoration: none;
border-block-end: 1px solid var(--color-light);
transition: color var(--transition-fast);
}
.mobile-nav__link:hover,
.mobile-nav__link--active {
color: var(--color-blue);
}
.mobile-nav__cta {
margin-block-start: var(--space-6);
}
.mobile-nav__cta .btn {
inline-size: 100%;
justify-content: center;
}
.mobile-nav__lang {
margin-block-start: var(--space-6);
display: flex;
justify-content: center;
}
.mobile-nav-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: calc(var(--z-header) - 1);
opacity: 0;
visibility: hidden;
transition:
opacity var(--transition-base),
visibility var(--transition-base);
}
.mobile-nav-overlay--visible {
opacity: 1;
visibility: visible;
}
body.nav-open {
overflow: hidden;
}
.nav-menu {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
gap: 0;
}
.nav-menu li a {
position: relative;
display: inline-flex;
align-items: center;
padding: var(--space-2) var(--space-2);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark);
text-decoration: none;
border-radius: var(--radius-md);
white-space: nowrap;
transition:
color var(--transition-fast),
background-color var(--transition-fast);
}
.nav-menu li a:hover,
.nav-menu li a.active {
color: var(--color-blue);
background-color: var(--color-blue-50);
}
.mobile-nav-menu {
list-style: none;
margin: 0;
padding: 0;
}
.mobile-nav-menu li a {
display: block;
padding: var(--space-4) 0;
font-size: var(--text-lg);
font-weight: var(--weight-medium);
color: var(--color-dark);
text-decoration: none;
border-block-end: 1px solid var(--color-light);
transition: color var(--transition-fast);
}
.mobile-nav-menu li a:hover {
color: var(--color-blue);
}
.site-header__nav {
display: none;
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.site-header__cta {
display: none;
}
.mobile-menu__lang {
display: flex;
justify-content: center;
margin-block-start: var(--space-6);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-light);
}
.lang-switcher--mobile {
display: inline-flex;
gap: 0;
}
.lang-switcher--mobile .lang-switcher__btn {
padding: var(--space-2) var(--space-5);
font-size: var(--text-base);
}
.mobile-menu__cta {
margin-block-start: var(--space-6);
display: block;
text-align: center;
}
@media (min-width: 1024px) {
.site-header__nav {
display: flex;
align-items: center;
}
.site-header__cta {
display: inline-flex;
}
.site-header__hamburger {
display: none;
}
.mobile-menu {
display: none !important;
}
}
.site-header,
.site-header.header--scrolled {
background-color: var(--color-purple-darker);
background-image: none;
border-block-end: 1px solid rgba(255, 255, 255, 0.08);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.site-header.header--scrolled {
box-shadow: 0 8px 24px rgba(9, 16, 48, 0.32);
}
body.home .site-header:not(.header--scrolled) {
background-color: transparent;
border-block-end-color: transparent;
box-shadow: none;
}
.site-logo__image,
.site-logo img,
.custom-logo {
filter: brightness(0) invert(1);
}
.site-logo__text {
color: var(--color-white);
}
.site-nav__link,
.nav-menu li a {
color: rgba(255, 255, 255, 0.86);
}
.site-nav__link:hover,
.site-nav__link--active,
.nav-menu li a:hover,
.nav-menu li a.active {
color: var(--color-white);
background-color: rgba(255, 255, 255, 0.12);
}
.site-nav__link::after {
background-color: var(--color-yellow);
}
.lang-switcher {
background-color: rgba(255, 255, 255, 0.14);
}
.lang-switcher__toggle {
color: var(--color-white);
background: transparent;
box-shadow: none;
}
.hamburger:hover,
.site-header__hamburger:hover {
background-color: rgba(255, 255, 255, 0.14);
}
.hamburger__line,
.hamburger-line {
background-color: var(--color-white);
}
.mobile-nav,
.mobile-menu {
background-color: var(--color-purple);
background-image: var(--gradient-hero);
}
.mobile-nav__link,
.mobile-nav-menu li a {
color: rgba(255, 255, 255, 0.9);
border-block-end-color: rgba(255, 255, 255, 0.14);
}
.mobile-nav__link:hover,
.mobile-nav__link--active,
.mobile-nav-menu li a:hover {
color: var(--color-yellow);
}
.mobile-menu__lang {
border-block-start-color: rgba(255, 255, 255, 0.14);
}
.lang-switcher--mobile {
background-color: rgba(255, 255, 255, 0.14);
}
.lang-switcher--mobile .lang-switcher__btn {
color: rgba(255, 255, 255, 0.8);
}
.lang-switcher--mobile .lang-switcher__btn:hover {
color: var(--color-white);
}
.lang-switcher--mobile .lang-switcher__btn--active,
.lang-switcher--mobile .lang-switcher__btn--active:hover {
color: var(--color-blue);
}

/* ===== hero.css ===== */
.hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-block-size: 100vh;
min-block-size: 100dvh;
padding-block-start: var(--header-height);
padding-inline: var(--container-padding);
background: var(--gradient-hero);
overflow: hidden;
color: var(--color-white);
}
.hero__particles {
position: absolute;
inset: 0;
z-index: var(--z-base);
pointer-events: none;
}
.hero__particles canvas {
display: block;
inline-size: 100%;
block-size: 100%;
}
.hero__engine {
position: absolute;
inset: 0;
z-index: var(--z-base);
display: block;
inline-size: 100%;
block-size: 100%;
pointer-events: none;
}
.hero__engine-readout {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-block-start: var(--space-6);
margin-block-end: 0;
padding: var(--space-2) var(--space-4);
border: 1px solid rgba(255, 255, 255, 0.22);
border-radius: var(--radius-full);
background-color: rgba(9, 16, 48, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.82);
}
.hero__engine-dot {
inline-size: 7px;
block-size: 7px;
border-radius: var(--radius-full);
background-color: #ffd23c;
box-shadow: 0 0 0 0 rgba(255, 210, 60, 0.65);
animation: enginePulse 2.4s ease-out infinite;
}
.hero__engine-figure {
font-family: var(--font-display);
font-size: var(--text-lg);
font-variant-numeric: tabular-nums;
color: #ffd23c;
}
.hero__engine-hint {
margin-block-start: var(--space-3);
margin-block-end: 0;
font-size: var(--text-xs);
letter-spacing: var(--tracking-wide);
color: rgba(255, 255, 255, 0.5);
}
@keyframes enginePulse {
0% {
box-shadow: 0 0 0 0 rgba(255, 210, 60, 0.6);
}
70% {
box-shadow: 0 0 0 9px rgba(255, 210, 60, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(255, 210, 60, 0);
}
}
@media (prefers-reduced-motion: reduce) {
.hero__engine-dot {
animation: none;
}
}
@media (hover: none) {
.hero__engine-hint {
display: none;
}
}
.hero__blob {
position: absolute;
z-index: var(--z-base);
opacity: 0.12;
filter: blur(40px);
pointer-events: none;
}
.hero__blob--1 {
inline-size: clamp(300px, 40vw, 600px);
block-size: clamp(300px, 40vw, 600px);
background: var(--color-purple-light);
inset-block-start: -10%;
inset-inline-end: -5%;
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 95% 65%, 75% 90%, 40% 100%, 10% 80%, 0% 50%, 15% 20%);
animation: morphBlob 20s ease-in-out infinite alternate;
}
.hero__blob--2 {
inline-size: clamp(250px, 35vw, 500px);
block-size: clamp(250px, 35vw, 500px);
background: var(--color-blue-light);
inset-block-end: -5%;
inset-inline-start: -5%;
clip-path: polygon(30% 0%, 70% 5%, 100% 30%, 90% 70%, 65% 100%, 20% 90%, 0% 60%, 10% 25%);
animation: morphBlob 20s ease-in-out infinite alternate-reverse;
}
.hero__blob--3 {
inline-size: clamp(200px, 25vw, 400px);
block-size: clamp(200px, 25vw, 400px);
background: var(--color-yellow);
inset-block-start: 40%;
inset-inline-end: 20%;
opacity: 0.06;
clip-path: polygon(45% 0%, 85% 15%, 100% 50%, 80% 85%, 45% 100%, 10% 80%, 0% 45%, 20% 10%);
animation: morphBlob 25s ease-in-out infinite alternate;
}
.hero__blob--1 { animation: morphBlob 20s ease-in-out infinite alternate, float 8s ease-in-out infinite; }
.hero__blob--2 { animation: morphBlob 20s ease-in-out infinite alternate-reverse, float 10s ease-in-out infinite reverse; }
.hero__blob--3 { animation: morphBlob 25s ease-in-out infinite alternate, float 12s ease-in-out infinite; }
.hero__content {
position: relative;
z-index: var(--z-raised);
max-inline-size: 800px;
inline-size: 100%;
margin-inline: auto;
text-align: center;
padding-block: var(--space-16);
}
.hero__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-white);
margin-block-end: var(--space-6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.hero__badge-dot {
inline-size: 8px;
block-size: 8px;
border-radius: var(--radius-full);
background-color: var(--color-yellow);
animation: pulse 2s ease-in-out infinite;
}
.hero__title,
.hero__headline {
font-family: var(--font-display);
font-size: var(--text-6xl);
color: var(--color-white);
line-height: var(--leading-tight);
margin-block-end: var(--space-6);
}
.hero__title-highlight {
color: var(--color-yellow);
position: relative;
}
.hero__subtitle {
font-family: var(--font-body);
font-size: var(--text-xl);
font-weight: var(--weight-regular);
color: rgba(255, 255, 255, 0.85);
line-height: var(--leading-relaxed);
max-inline-size: 600px;
margin-inline: auto;
margin-block-end: var(--space-8);
}
.typed-cursor {
display: inline-block;
font-size: inherit;
color: var(--color-yellow);
animation: typewriterCursor 0.8s ease-in-out infinite;
}
.typed-cursor--blink {
animation: typewriterCursor 0.8s ease-in-out infinite;
}
.hero__cta {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-4);
inline-size: 100%;
margin-block-end: var(--space-10);
}
.hero__cta .btn {
min-inline-size: 220px;
}
.hero__cta .btn-primary {
font-size: var(--text-lg);
padding: var(--space-4) var(--space-8);
}
.hero__cta .btn-outline-white {
font-size: var(--text-base);
padding: var(--space-3) var(--space-6);
}
.hero__trust {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4);
}
.hero__trust-label {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
font-weight: var(--weight-medium);
}
.hero__trust-logos {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-6);
}
.hero__trust-logo {
block-size: 28px;
inline-size: auto;
opacity: 0.5;
filter: brightness(0) invert(1);
transition: opacity var(--transition-fast);
}
.hero__trust-logo:hover {
opacity: 0.8;
}
.hero__trust-stats {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-8);
margin-block-start: var(--space-4);
margin-inline: auto;
}
.hero__trust-stat {
text-align: center;
}
.hero__trust-stat-number {
display: block;
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-yellow);
}
.hero__trust-stat-label {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.6);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.hero__trust-stamps {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--space-8);
inline-size: 100%;
margin-inline: auto;
}
.hero__trust-item {
text-align: center;
}
.hero__trust-number {
display: block;
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-yellow);
}
.hero__scroll,
.hero__scroll-indicator {
position: absolute;
inset-block-end: var(--space-8);
inset-inline-start: 50%;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-2);
color: rgba(255, 255, 255, 0.5);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
animation: bounce 2s ease-in-out infinite;
}
.hero__scroll-line {
inline-size: 1px;
block-size: 40px;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), transparent);
}
.hero__engine-label--short {
display: none;
}
@media (max-width: 767px) {
.hero__engine-label--long {
display: none;
}
.hero__engine-label--short {
display: inline;
}
.hero__engine-readout {
font-size: var(--text-xs);
gap: var(--space-1);
padding-inline: var(--space-3);
}
.hero__engine-figure {
font-size: var(--text-sm);
}
.hero__scroll-indicator {
display: none;
}
}

/* ===== sections.css ===== */
.trust-bar {
padding-block: var(--space-10);
background-color: var(--color-white);
border-block-end: 1px solid var(--color-light-dark);
}
.trust-bar__label {
text-align: center;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark-lighter);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-block-end: var(--space-6);
}
.trust-bar__logos {
margin-block-end: var(--space-6);
}
.trust-bar__logos-label {
text-align: center;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark-lighter);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-block-end: var(--space-6);
}
.trust-bar__logos-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-8);
}
.trust-bar__logo-item {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-3) var(--space-5);
background-color: var(--color-light);
border-radius: var(--radius-md);
opacity: 0.6;
transition:
opacity var(--transition-base),
background-color var(--transition-base);
}
.trust-bar__logo-item:hover {
opacity: 1;
background-color: var(--color-light-dark);
}
.trust-bar__logo-placeholder {
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark-lighter);
white-space: nowrap;
}
.trust-bar__logo {
block-size: 32px;
inline-size: auto;
opacity: 0.4;
filter: grayscale(1);
transition:
opacity var(--transition-base),
filter var(--transition-base);
}
.trust-bar__logo:hover {
opacity: 1;
filter: grayscale(0);
}
.trust-bar__counters {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-10);
margin-block-start: var(--space-8);
}
.trust-bar__counter,
.trust-bar__counter-item {
text-align: center;
}
.trust-bar__counter-number,
.counter-number {
display: block;
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--color-blue);
line-height: var(--leading-none);
margin-block-end: var(--space-1);
}
.trust-bar__counter-label {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
}
.services,
.services-grid {
padding-block: var(--space-16);
background-color: var(--color-purple);
}
.services-grid .services-grid__headline {
color: var(--color-white);
}
.services-grid .services-grid__subhead {
color: rgba(255, 255, 255, 0.8);
}
.services-grid__header {
text-align: center;
margin-block-end: var(--space-12);
}
.services-grid__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.services-grid__subhead {
font-size: var(--text-lg);
color: var(--color-dark-lighter);
max-inline-size: 600px;
margin-inline: auto;
line-height: var(--leading-relaxed);
}
.services__grid,
.services-grid__cards {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.services__card,
.service-card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-8);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
text-align: center;
}
.services__card:hover,
.service-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.services__card-icon,
.service-card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 64px;
block-size: 64px;
margin-inline: auto;
margin-block-end: var(--space-5);
border-radius: var(--radius-xl);
background: var(--gradient-hero);
color: var(--color-white);
font-size: 1.75rem;
}
.services__card-icon svg,
.service-card__icon svg {
inline-size: 32px;
block-size: 32px;
max-width: 32px;
max-height: 32px;
}
.services__card-title,
.service-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-3);
transition: color 0.4s ease;
}
.services__card-text,
.service-card__desc {
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
transition: color 0.4s ease;
}
.services__card-link,
.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
margin-block-start: var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-blue);
text-decoration: none;
transition:
gap var(--transition-fast),
color 0.4s ease;
}
.services__card-link:hover,
.service-card__link:hover {
gap: var(--space-2);
}
.service-card__link svg {
inline-size: 16px;
block-size: 16px;
}
.cta-band {
background-color: var(--color-yellow);
padding-block: var(--space-12);
text-align: center;
}
.cta-band__title {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.cta-band__text {
font-size: var(--text-lg);
color: var(--color-dark);
margin-block-end: var(--space-6);
max-inline-size: 600px;
margin-inline: auto;
}
.cta-band__actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.cta-band .btn-secondary {
box-shadow: var(--shadow-lg);
}
.cta-band .btn-outline {
border-color: var(--color-dark);
color: var(--color-dark);
}
.cta-band .btn-outline:hover {
background-color: var(--color-dark);
color: var(--color-white);
}
.process {
padding-block: var(--space-16);
background-color: var(--color-white);
}
.process__header {
text-align: center;
margin-block-end: var(--space-12);
}
.process__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-dark-darker);
}
.process__timeline {
position: relative;
max-inline-size: 800px;
margin-inline: auto;
}
.process__timeline::before {
content: '';
position: absolute;
inset-inline-start: 20px;
inset-block-start: 0;
inset-block-end: 0;
inline-size: 3px;
background: linear-gradient(
to bottom,
var(--color-blue),
var(--color-purple)
);
border-radius: var(--radius-full);
}
.process__timeline-line {
position: absolute;
inset-inline-start: 20px;
inset-block-start: 0;
inset-block-end: 0;
inline-size: 3px;
background: linear-gradient(
to bottom,
var(--color-blue),
var(--color-purple)
);
border-radius: var(--radius-full);
}
.process__timeline:has(.process__timeline-line)::before {
display: none;
}
.process__step,
.process-step {
position: relative;
padding-inline-start: var(--space-16);
padding-block-end: var(--space-10);
}
.process__step:last-child,
.process-step:last-child {
padding-block-end: 0;
}
.process__step-number,
.process-step__number {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
display: flex;
align-items: center;
justify-content: center;
inline-size: 42px;
block-size: 42px;
border-radius: var(--radius-full);
background-color: var(--color-blue);
color: var(--color-white);
font-family: var(--font-display);
font-size: var(--text-lg);
box-shadow: 0 0 0 4px var(--color-white), var(--shadow-md);
z-index: var(--z-raised);
}
.process-step__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
margin-block-end: var(--space-3);
color: var(--color-blue);
}
.process-step__icon svg {
inline-size: 48px;
block-size: 48px;
max-width: 48px;
max-height: 48px;
}
.process__step-content,
.process-step__content {
background-color: var(--color-light);
border-radius: var(--radius-lg);
padding: var(--space-6);
}
.process__step-title,
.process-step__title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-2);
}
.process__step-text,
.process-step__desc {
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
}
.process__step-duration {
display: inline-block;
margin-block-start: var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-blue);
}
.portfolio {
padding-block: var(--space-16);
background-color: var(--color-light);
}
.portfolio__filters {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-end: var(--space-10);
}
.portfolio__filter-btn {
padding: var(--space-2) var(--space-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark-light);
background-color: var(--color-white);
border: 1px solid var(--color-light-dark);
border-radius: var(--radius-full);
cursor: pointer;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.portfolio__filter-btn:hover {
color: var(--color-blue);
border-color: var(--color-blue);
}
.portfolio__filter-btn--active {
background-color: var(--color-blue);
color: var(--color-white);
border-color: var(--color-blue);
}
.portfolio__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.portfolio__item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
cursor: pointer;
}
.portfolio__item-image {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.portfolio__item:hover .portfolio__item-image {
transform: scale(1.05);
}
.portfolio__item-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: rgba(57, 9, 119, 0.85);
color: var(--color-white);
opacity: 0;
transition: opacity var(--transition-base);
padding: var(--space-6);
text-align: center;
}
.portfolio__item:hover .portfolio__item-overlay {
opacity: 1;
}
.portfolio__item-title {
font-family: var(--font-display);
font-size: var(--text-xl);
}
.portfolio__item-category {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
}
.portfolio-carousel {
padding-block: var(--space-16);
background-color: var(--color-light);
}
.portfolio-carousel__header {
text-align: center;
margin-block-end: var(--space-10);
}
.portfolio-carousel__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.portfolio-carousel__filters {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-end: var(--space-10);
}
.portfolio-carousel__filter-btn {
padding: var(--space-2) var(--space-5);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark-light);
background-color: var(--color-white);
border: 1px solid var(--color-light-dark);
border-radius: var(--radius-full);
cursor: pointer;
transition:
color var(--transition-fast),
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.portfolio-carousel__filter-btn:hover {
color: var(--color-blue);
border-color: var(--color-blue);
}
.portfolio-carousel__filter-btn--active {
background-color: var(--color-blue);
color: var(--color-white);
border-color: var(--color-blue);
}
.portfolio-carousel__grid {
display: grid;
grid-template-columns: 1fr;
gap: 1.5rem;
}
.portfolio-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--color-white);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
cursor: pointer;
}
.portfolio-item:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.portfolio-item__thumbnail {
position: relative;
overflow: hidden;
height: 250px;
}
.portfolio-item__placeholder-img {
width: 100%;
height: 100%;
object-fit: cover;
aspect-ratio: 4 / 3;
max-height: 250px;
background-color: var(--color-light-dark);
display: block;
}
.portfolio-item__overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--space-2);
background: rgba(57, 9, 119, 0.85);
color: var(--color-white);
opacity: 0;
transition: opacity var(--transition-base);
padding: var(--space-6);
text-align: center;
}
.portfolio-item:hover .portfolio-item__overlay {
opacity: 1;
}
.portfolio-item__title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-white);
padding: var(--space-3) var(--space-4) 0;
}
.portfolio-item__category {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.7);
padding: var(--space-1) var(--space-4) var(--space-4);
}
.portfolio-item > .portfolio-item__title {
color: var(--color-dark-darker);
}
.portfolio-item > .portfolio-item__category {
color: var(--color-dark-lighter);
}
.portfolio-item__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 0 var(--space-4) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-blue);
text-decoration: none;
transition: gap var(--transition-fast);
}
.portfolio-item__link:hover {
gap: var(--space-2);
}
.stats {
padding-block: var(--space-16);
background: var(--gradient-stats);
color: var(--color-white);
}
.stats__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-8);
text-align: center;
}
.stats__item {
padding: var(--space-6);
}
.stats__number {
display: block;
font-family: var(--font-display);
font-size: var(--text-5xl);
color: var(--color-white);
line-height: var(--leading-none);
margin-block-end: var(--space-2);
}
.stats__label {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.75);
font-weight: var(--weight-medium);
}
.stats-counter {
background: linear-gradient(135deg, var(--color-blue), var(--color-purple));
color: var(--color-white);
padding: 5rem 0;
text-align: center;
}
.stats-counter__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.stats-counter__item {
padding: var(--space-6);
}
.stats-counter .counter-number {
display: block;
font-family: var(--font-display);
font-size: var(--text-5xl);
font-weight: var(--weight-bold);
color: var(--color-white);
line-height: var(--leading-none);
margin-block-end: var(--space-2);
}
.stats-counter__label {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.85);
font-weight: var(--weight-medium);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
}
.testimonials {
padding-block: var(--space-16);
background-color: var(--color-white);
overflow: hidden;
}
.testimonials__slider {
display: flex;
gap: var(--space-6);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
padding-block-end: var(--space-4);
-ms-overflow-style: none;
scrollbar-width: none;
}
.testimonials__slider::-webkit-scrollbar {
display: none;
}
.testimonials__card {
flex: 0 0 100%;
scroll-snap-align: start;
background-color: var(--color-light);
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
}
.testimonials__quote-icon {
font-size: var(--text-4xl);
color: var(--color-blue-200);
line-height: 1;
margin-block-end: var(--space-4);
font-family: serif;
}
.testimonials__text {
font-size: var(--text-lg);
color: var(--color-dark);
line-height: var(--leading-relaxed);
font-style: italic;
margin-block-end: var(--space-6);
}
.testimonials__author {
display: flex;
align-items: center;
gap: var(--space-3);
}
.testimonials__avatar {
inline-size: 48px;
block-size: 48px;
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
}
.testimonials__author-info {
display: flex;
flex-direction: column;
}
.testimonials__author-name {
font-weight: var(--weight-semibold);
color: var(--color-dark-darker);
font-size: var(--text-base);
}
.testimonials__author-role {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
}
.testimonials__nav {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-4);
margin-block-start: var(--space-6);
}
.testimonials__nav-btn {
display: flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-full);
background-color: var(--color-light);
border: 1px solid var(--color-light-dark);
color: var(--color-dark);
cursor: pointer;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.testimonials__nav-btn:hover {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: var(--color-white);
}
.testimonials__dots {
display: flex;
gap: var(--space-2);
}
.testimonials__dot {
inline-size: 8px;
block-size: 8px;
border-radius: var(--radius-full);
background-color: var(--color-light-dark);
border: none;
cursor: pointer;
transition: background-color var(--transition-fast);
}
.testimonials__dot--active {
background-color: var(--color-blue);
inline-size: 24px;
}
.testimonials__header {
text-align: center;
margin-block-end: var(--space-10);
}
.testimonials__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.testimonials__track {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
gap: 2rem;
padding-block-end: var(--space-4);
-ms-overflow-style: none;
scrollbar-width: none;
}
.testimonials__track::-webkit-scrollbar {
display: none;
}
.testimonial-slide {
min-width: 100%;
flex-shrink: 0;
scroll-snap-align: start;
background-color: var(--color-light);
border-radius: var(--radius-xl);
padding: var(--space-8);
position: relative;
}
.testimonial-slide__stars {
display: flex;
gap: var(--space-1);
margin-block-end: var(--space-4);
color: var(--color-yellow);
font-size: var(--text-lg);
}
.testimonial-slide__quote {
font-size: var(--text-lg);
color: var(--color-dark);
line-height: var(--leading-relaxed);
font-style: italic;
margin-block-end: var(--space-6);
}
.testimonial-slide__meta {
display: flex;
align-items: center;
gap: var(--space-3);
}
.testimonial-slide__avatar {
inline-size: 48px;
block-size: 48px;
border-radius: var(--radius-full);
object-fit: cover;
flex-shrink: 0;
background-color: var(--color-light-dark);
}
.testimonial-slide__name {
font-weight: var(--weight-semibold);
color: var(--color-dark-darker);
font-size: var(--text-base);
}
.testimonial-slide__role {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
}
.testimonials__arrow {
display: flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-full);
background-color: var(--color-light);
border: 1px solid var(--color-light-dark);
color: var(--color-dark);
cursor: pointer;
transition:
background-color var(--transition-fast),
border-color var(--transition-fast);
}
.testimonials__arrow:hover {
background-color: var(--color-blue);
border-color: var(--color-blue);
color: var(--color-white);
}
.faq {
padding-block: var(--space-16);
background-color: var(--color-light);
}
.faq__list {
max-inline-size: 800px;
margin-inline: auto;
}
.faq__item {
background-color: var(--color-white);
border-radius: var(--radius-lg);
margin-block-end: var(--space-3);
overflow: hidden;
box-shadow: var(--shadow-xs);
}
.faq__question {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
inline-size: 100%;
padding: var(--space-5) var(--space-6);
font-family: var(--font-body);
font-size: var(--text-md);
font-weight: var(--weight-semibold);
color: var(--color-dark-darker);
text-align: start;
background: none;
border: none;
cursor: pointer;
transition: color var(--transition-fast);
}
.faq__question:hover {
color: var(--color-blue);
}
.faq__icon {
flex-shrink: 0;
inline-size: 24px;
block-size: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
transition: transform var(--transition-base);
}
.faq__icon::before,
.faq__icon::after {
content: '';
position: absolute;
background-color: currentColor;
border-radius: var(--radius-full);
transition: transform var(--transition-base);
}
.faq__icon::before {
inline-size: 14px;
block-size: 2px;
}
.faq__icon::after {
inline-size: 2px;
block-size: 14px;
}
.faq__item--open .faq__icon::after {
transform: rotate(90deg);
}
.faq__answer {
max-block-size: 0;
overflow: hidden;
transition: max-block-size var(--transition-slow) var(--ease-out-expo);
}
.faq__item--open .faq__answer {
max-block-size: 500px;
}
.faq__answer-content {
padding: 0 var(--space-6) var(--space-6);
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
}
.faq__header {
text-align: center;
margin-block-end: var(--space-10);
}
.faq__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.faq__accordion {
max-inline-size: 800px;
margin-inline: auto;
}
.faq__question-text {
flex: 1;
}
.faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.faq__item--open .faq__answer {
max-height: 500px;
}
.faq__item--open .faq__icon {
transform: rotate(45deg);
}
.contact {
padding-block: var(--space-16);
background-color: var(--color-white);
}
.contact__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
}
.contact__form-wrapper {
background-color: var(--color-light);
border-radius: var(--radius-xl);
padding: var(--space-8);
}
.contact__form-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-6);
}
.contact__info {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.contact__info-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.contact__info-text {
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-6);
}
.contact__info-item {
display: flex;
align-items: flex-start;
gap: var(--space-4);
}
.contact__info-icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
border-radius: var(--radius-lg);
background-color: var(--color-blue-100);
color: var(--color-blue);
flex-shrink: 0;
}
.contact__info-icon svg {
inline-size: 20px;
block-size: 20px;
}
.contact__info-label {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
margin-block-end: var(--space-1);
}
.contact__info-value {
font-weight: var(--weight-medium);
color: var(--color-dark);
}
.contact__info-value a {
color: var(--color-dark);
text-decoration: none;
transition: color var(--transition-fast);
}
.contact__info-value a:hover {
color: var(--color-blue);
}
.contact__map {
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
margin-block-start: var(--space-6);
}
.contact__map iframe {
inline-size: 100%;
block-size: 100%;
}
.lead-magnet {
padding-block: var(--space-16);
background: var(--gradient-lead-magnet);
color: var(--color-white);
}
.lead-magnet__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: center;
max-inline-size: 900px;
margin-inline: auto;
}
.lead-magnet__title {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.lead-magnet__text {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
margin-block-end: var(--space-6);
line-height: var(--leading-relaxed);
}
.lead-magnet__benefits {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-block-end: var(--space-6);
}
.lead-magnet__benefit {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.9);
}
.lead-magnet__benefit-icon {
flex-shrink: 0;
inline-size: 20px;
block-size: 20px;
border-radius: var(--radius-full);
background-color: var(--color-yellow);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-dark-darker);
font-size: 0.65rem;
}
.lead-magnet__form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.lead-magnet__input {
padding: var(--space-4) var(--space-5);
font-size: var(--text-base);
border: 2px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-white);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transition:
border-color var(--transition-fast),
background-color var(--transition-fast);
}
.lead-magnet__input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.lead-magnet__input:focus {
outline: none;
border-color: var(--color-yellow);
background-color: rgba(255, 255, 255, 0.15);
}
.lead-magnet__form .btn-primary {
inline-size: 100%;
}
.lead-magnet__disclaimer {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.5);
margin-block-start: var(--space-2);
}
.lead-magnet__headline {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.lead-magnet__subhead {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
margin-block-end: var(--space-6);
line-height: var(--leading-relaxed);
}
.lead-magnet__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.lead-magnet__benefit {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.9);
}
.lead-magnet__benefit::before {
content: "\2713";
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
inline-size: 22px;
block-size: 22px;
border-radius: var(--radius-full);
background-color: var(--color-yellow);
color: var(--color-dark-darker);
font-size: 0.7rem;
font-weight: var(--weight-bold);
}
.lead-magnet__form-wrap {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
padding: var(--space-8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.lead-magnet__field {
margin-block-end: var(--space-3);
}
.lead-magnet__trust {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.5);
margin-block-start: var(--space-2);
text-align: center;
}
.lead-magnet__message {
text-align: center;
padding: var(--space-4);
font-size: var(--text-base);
color: var(--color-white);
}
.odoo-erp {
padding-block: var(--space-16);
background: linear-gradient(135deg, var(--color-blue), var(--color-blue-darker));
color: var(--color-white);
}
.odoo-erp__header {
text-align: center;
margin-block-end: var(--space-12);
}
.odoo-erp__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.odoo-erp__badge-icon {
inline-size: 24px;
block-size: 24px;
}
.odoo-erp__badge-text {
font-weight: var(--weight-semibold);
}
.odoo-erp__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.odoo-erp__subhead {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-inline-size: 600px;
margin-inline: auto;
line-height: var(--leading-relaxed);
}
.odoo-erp__modules {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
margin-block-end: var(--space-10);
}
.odoo-module-card {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-lg);
padding: var(--space-6);
border: 1px solid rgba(255, 255, 255, 0.2);
transition:
transform var(--transition-base),
box-shadow var(--transition-base),
border-color var(--transition-base);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.odoo-module-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
border-color: rgba(255, 255, 255, 0.4);
background-color: rgba(255, 255, 255, 0.15);
}
.odoo-module-card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 56px;
block-size: 56px;
border-radius: var(--radius-lg);
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-yellow);
margin-block-end: var(--space-4);
}
.odoo-module-card__icon svg {
inline-size: 28px;
block-size: 28px;
max-width: 28px;
max-height: 28px;
}
.odoo-module-card__title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-white);
margin-block-end: var(--space-2);
}
.odoo-module-card__desc {
font-size: var(--text-base);
color: rgba(255, 255, 255, 0.8);
line-height: var(--leading-relaxed);
}
.odoo-erp__services {
text-align: center;
margin-block-start: var(--space-16);
margin-block-end: var(--space-8);
}
.odoo-erp__services-title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-white);
margin-block-end: var(--space-6);
}
.odoo-erp__services-list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-4);
list-style: none;
padding: 0;
margin: 0;
}
.odoo-erp__service-item {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-white);
padding: var(--space-2) var(--space-4);
background-color: rgba(255, 255, 255, 0.12);
border-radius: var(--radius-full);
}
.odoo-erp__service-item svg {
inline-size: 20px;
block-size: 20px;
color: var(--color-yellow);
flex-shrink: 0;
}
.odoo-erp__highlights {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-12);
margin-block-end: var(--space-8);
}
.odoo-erp__highlight {
text-align: center;
}
.odoo-erp__highlight-number {
display: block;
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--color-yellow);
line-height: var(--leading-none);
margin-block-end: var(--space-1);
}
.odoo-erp__highlight-label {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.75);
}
.odoo-erp__cta {
text-align: center;
}
.contact-section {
padding-block: var(--space-16);
background-color: var(--color-white);
}
.contact-section__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.contact-section__form-col {
background-color: var(--color-light);
border-radius: var(--radius-xl);
padding: var(--space-8);
}
.contact-section__info-col {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
.contact-section__info-col .contact-info-card,
.contact-section__info-col .contact-info-card:hover {
display: block;
padding: var(--space-8);
background-color: var(--color-light);
border-radius: var(--radius-xl);
margin-block-end: 0;
}
.contact-info-card__title {
margin-block-end: var(--space-6);
}
.contact-info-card__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: var(--space-5);
}
.contact-info-card__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
}
.contact-info-card__item svg {
flex-shrink: 0;
margin-block-start: 2px;
color: var(--color-blue);
}
.contact-info-card__item .contact-info-card__value {
display: block;
text-decoration: none;
color: var(--color-dark-darker);
}
.contact-form__progress {
height: 4px;
background-color: var(--color-light-dark);
border-radius: var(--radius-full);
margin-block-end: var(--space-6);
overflow: hidden;
}
.contact-form__progress-fill {
height: 100%;
background: var(--gradient-hero);
border-radius: var(--radius-full);
transition: width 0.3s ease;
}
.contact-form__step {
display: none;
}
.contact-form__step--active {
display: block;
}
.contact-form__field {
margin-block-end: var(--space-4);
}
.contact-form__field label {
display: block;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark);
margin-block-end: var(--space-2);
}
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
width: 100%;
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
font-family: var(--font-body);
border: 2px solid var(--color-light-dark);
border-radius: var(--radius-md);
background-color: var(--color-white);
color: var(--color-dark);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
outline: none;
border-color: var(--color-blue);
box-shadow: 0 0 0 3px var(--color-blue-200);
}
.contact-form__textarea {
min-height: 120px;
resize: vertical;
}
.contact-form__nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-block-start: var(--space-6);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-light-dark);
}
.contact-form__checkbox {
margin-inline-end: var(--space-2);
}
.contact-form__checkbox-label {
font-size: var(--text-sm);
color: var(--color-dark-light);
}

/* ===== animations.css ===== */
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero__word {
display: inline-block;
white-space: nowrap;
overflow: hidden;
vertical-align: top;
padding-block-end: 0.18em;
margin-block-end: -0.18em;
}
.hero__char {
display: inline-block;
animation: heroRise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: calc(var(--i, 0) * 28ms);
}
@keyframes heroRise {
from {
transform: translateY(110%);
}
to {
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.85);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
transform: scale(1);
}
50% {
opacity: 0.7;
transform: scale(1.05);
}
}
@keyframes pulseGlow {
0%, 100% {
box-shadow: 0 0 5px rgba(34, 100, 245, 0.3);
}
50% {
box-shadow: 0 0 20px rgba(34, 100, 245, 0.6), 0 0 40px rgba(34, 100, 245, 0.2);
}
}
@keyframes morphBlob {
0% {
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 95% 65%, 75% 90%, 40% 100%, 10% 80%, 0% 50%, 15% 20%);
}
25% {
clip-path: polygon(40% 5%, 75% 0%, 95% 30%, 100% 60%, 80% 95%, 50% 100%, 15% 85%, 5% 55%, 20% 15%);
}
50% {
clip-path: polygon(55% 5%, 90% 15%, 100% 45%, 90% 75%, 70% 100%, 35% 95%, 5% 75%, 0% 40%, 25% 10%);
}
75% {
clip-path: polygon(45% 0%, 85% 5%, 100% 40%, 95% 70%, 75% 95%, 45% 100%, 10% 85%, 0% 50%, 10% 15%);
}
100% {
clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 95% 65%, 75% 90%, 40% 100%, 10% 80%, 0% 50%, 15% 20%);
}
}
@keyframes drawStroke {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-8px);
}
60% {
transform: translateY(-4px);
}
}
@keyframes gradientShift {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes typewriterCursor {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-4px); }
20%, 40%, 60%, 80% { transform: translateX(4px); }
}
@keyframes countUp {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes ripple {
to {
transform: scale(4);
opacity: 0;
}
}
.reveal {
opacity: 0;
transform: translateY(30px);
transition:
opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
.reveal.active {
opacity: 1;
transform: translateY(0);
}
.reveal--left {
opacity: 0;
transform: translateX(-40px);
transition:
opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
.reveal--left.active {
opacity: 1;
transform: translateX(0);
}
.reveal--right {
opacity: 0;
transform: translateX(40px);
transition:
opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
.reveal--right.active {
opacity: 1;
transform: translateX(0);
}
.reveal--scale {
opacity: 0;
transform: scale(0.9);
transition:
opacity 0.6s var(--ease-out-expo),
transform 0.6s var(--ease-out-expo);
}
.reveal--scale.active {
opacity: 1;
transform: scale(1);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }
.reveal--delay-5 { transition-delay: 0.5s; }
.reveal--delay-6 { transition-delay: 0.6s; }
.animate-fadeUp { animation: fadeUp 0.6s var(--ease-out-expo) forwards; }
.animate-fadeIn { animation: fadeIn 0.6s ease forwards; }
.animate-slideInLeft { animation: slideInLeft 0.6s var(--ease-out-expo) forwards; }
.animate-slideInRight { animation: slideInRight 0.6s var(--ease-out-expo) forwards; }
.animate-scaleIn { animation: scaleIn 0.5s var(--ease-out-expo) forwards; }
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-pulse { animation: pulse 2s ease-in-out infinite; }
.animate-pulseGlow { animation: pulseGlow 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 2s ease-in-out infinite; }
.animate-spin { animation: spin 1s linear infinite; }
.animate-gradientShift {
background-size: 200% 200%;
animation: gradientShift 20s ease infinite;
}
.cursor-spotlight {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: 0;
background: radial-gradient(
circle 300px at var(--mx, 50%) var(--my, 50%),
rgba(34, 100, 245, 0.12) 0%,
rgba(57, 9, 119, 0.08) 40%,
transparent 70%
);
transition: opacity 0.4s ease;
}
.cursor-spotlight.active {
opacity: 1;
}
@media (hover: none) {
.cursor-spotlight {
background: radial-gradient(
ellipse 60% 40% at 50% 50%,
rgba(34, 100, 245, 0.08) 0%,
rgba(57, 9, 119, 0.05) 50%,
transparent 80%
);
animation: mobileGlow 6s ease-in-out infinite;
}
.cursor-spotlight.active {
opacity: 0.8;
}
}
@keyframes mobileGlow {
0%, 100% {
background-position: 30% 40%;
opacity: 0.5;
}
33% {
background-position: 70% 30%;
opacity: 0.8;
}
66% {
background-position: 40% 70%;
opacity: 0.6;
}
}
@keyframes gradientBorder {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
.service-card {
position: relative;
transform-style: preserve-3d;
}
.service-card::before {
content: '';
position: absolute;
inset: -1px;
z-index: -1;
border-radius: inherit;
background: linear-gradient(
135deg,
var(--color-blue),
#390977,
#ffbe00,
var(--color-blue)
);
background-size: 300% 300%;
opacity: 0;
transition: opacity 0.4s ease;
}
.service-card:hover::before {
opacity: 1;
animation: gradientBorder 4s ease infinite;
}
.service-card::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background-color: rgba(12, 18, 48, 0);
transition: background-color 0.4s ease;
pointer-events: none;
}
.service-card:hover::after {
background-color: rgba(12, 18, 48, 0.5);
}
.service-card:hover .service-card__title,
.service-card:hover .service-card__desc,
.service-card:hover .service-card__link {
color: var(--color-white);
}
.ai-card {
transform-style: preserve-3d;
}
.ai-card:hover {
box-shadow:
0 0 0 1px rgba(34, 100, 245, 0.6),
0 0 15px rgba(34, 100, 245, 0.3),
0 0 30px rgba(57, 9, 119, 0.2),
0 8px 32px rgba(0, 0, 0, 0.3);
}
@media (hover: none) {
.service-card:active::before,
.service-card:focus-within::before {
opacity: 1;
animation: gradientBorder 4s ease infinite;
}
.service-card:active::after,
.service-card:focus-within::after {
background-color: rgba(12, 18, 48, 0.5);
}
.service-card:active .service-card__title,
.service-card:active .service-card__desc,
.service-card:active .service-card__link,
.service-card:focus-within .service-card__title,
.service-card:focus-within .service-card__desc,
.service-card:focus-within .service-card__link {
color: var(--color-white);
}
.service-card.in-view::before {
opacity: 0.5;
animation: gradientBorder 6s ease infinite;
}
.ai-card.in-view {
box-shadow:
0 0 0 1px rgba(34, 100, 245, 0.3),
0 0 10px rgba(34, 100, 245, 0.15),
0 0 20px rgba(57, 9, 119, 0.1);
}
}
.ai-automations__neural-bg,
.hero__blob,
.data-particle {
will-change: transform;
}
@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;
}
.reveal,
.reveal--left,
.reveal--right,
.reveal--scale {
opacity: 1;
transform: none;
transition: none;
}
.hero__blob {
animation: none;
}
.cursor-spotlight {
display: none;
}
.service-card::before {
display: none;
}
.ai-card {
box-shadow: none !important;
}
}

/* ===== ai-automations.css ===== */
.ai-automations {
position: relative;
padding-block: var(--space-20);
background: var(--gradient-ai);
color: var(--color-white);
overflow: hidden;
}
.ai-automations::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(34, 100, 245, 0.15) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(57, 9, 119, 0.2) 0%, transparent 40%),
radial-gradient(circle at 60% 80%, rgba(34, 100, 245, 0.1) 0%, transparent 40%);
pointer-events: none;
}
.ai-automations__accent-line {
position: absolute;
block-size: 1px;
background: linear-gradient(
to right,
transparent,
var(--color-blue-light),
transparent
);
opacity: 0.3;
pointer-events: none;
}
.ai-automations__accent-line--top {
inset-block-start: 15%;
inset-inline-start: 0;
inline-size: 100%;
}
.ai-automations__accent-line--bottom {
inset-block-end: 20%;
inset-inline-start: 0;
inline-size: 100%;
}
.ai-automations__accent-line--vertical {
position: absolute;
inline-size: 1px;
block-size: 100%;
inset-block-start: 0;
background: linear-gradient(
to bottom,
transparent,
var(--color-blue-light),
transparent
);
opacity: 0.2;
}
.ai-automations__accent-line--vertical:nth-child(1) {
inset-inline-start: 25%;
}
.ai-automations__accent-line--vertical:nth-child(2) {
inset-inline-start: 75%;
}
.ai-automations__header {
position: relative;
z-index: var(--z-raised);
text-align: center;
margin-block-end: var(--space-12);
}
.ai-automations__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: rgba(34, 100, 245, 0.2);
border: 1px solid rgba(34, 100, 245, 0.3);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-blue-light);
margin-block-end: var(--space-4);
}
.ai-automations__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.ai-automations__subhead {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.7);
max-inline-size: 600px;
margin-inline: auto;
line-height: var(--leading-relaxed);
}
.ai-automations__grid {
position: relative;
z-index: var(--z-raised);
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
.ai-card {
position: relative;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
padding: var(--space-6);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition:
transform var(--transition-base),
box-shadow var(--transition-slow),
border-color var(--transition-base),
background-color var(--transition-base);
overflow: hidden;
}
.ai-card::before {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
background: linear-gradient(
135deg,
rgba(34, 100, 245, 0.1) 0%,
transparent 50%,
rgba(57, 9, 119, 0.1) 100%
);
opacity: 0;
transition: opacity var(--transition-base);
pointer-events: none;
}
.ai-card:hover {
transform: translateY(-4px);
border-color: rgba(34, 100, 245, 0.4);
background: rgba(255, 255, 255, 0.08);
box-shadow:
0 0 0 1px rgba(34, 100, 245, 0.6),
0 0 15px rgba(34, 100, 245, 0.3),
0 0 30px rgba(57, 9, 119, 0.2),
0 8px 32px rgba(0, 0, 0, 0.3);
}
.ai-card:hover::before {
opacity: 1;
}
.ai-card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 52px;
block-size: 52px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--color-blue), var(--color-purple));
color: var(--color-white);
font-size: 1.5rem;
margin-block-end: var(--space-4);
position: relative;
}
.ai-card__icon::after {
content: '';
position: absolute;
inset: -4px;
border-radius: inherit;
background: linear-gradient(135deg, var(--color-blue), var(--color-purple));
opacity: 0;
filter: blur(8px);
z-index: var(--z-below);
transition: opacity var(--transition-base);
}
.ai-card:hover .ai-card__icon::after {
opacity: 0.5;
animation: pulseGlow 2s ease-in-out infinite;
}
.ai-card__icon svg {
inline-size: 24px;
block-size: 24px;
}
.ai-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-white);
margin-block-end: var(--space-2);
}
.ai-card__desc {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.65);
line-height: var(--leading-relaxed);
}
.ai-card__glow {
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
opacity: 0;
transition: opacity var(--transition-base);
background: radial-gradient(
circle at 50% 0%,
rgba(34, 100, 245, 0.15) 0%,
transparent 60%
);
}
.ai-card:hover .ai-card__glow {
opacity: 1;
}
.ai-card__tag {
display: inline-block;
margin-block-start: var(--space-3);
padding: var(--space-1) var(--space-2);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--color-yellow);
background-color: rgba(255, 190, 0, 0.1);
border-radius: var(--radius-sm);
}
.ai-automations__neural-bg {
position: absolute;
inset: 0;
z-index: var(--z-base);
pointer-events: none;
overflow: hidden;
}
.ai-automations__neural-bg svg {
inline-size: 100%;
block-size: 100%;
opacity: 0.15;
}
.neural-node {
fill: var(--color-blue-light);
filter: drop-shadow(0 0 4px var(--color-blue));
}
.neural-connection {
stroke: var(--color-blue-light);
stroke-width: 0.5;
opacity: 0.4;
filter: drop-shadow(0 0 2px var(--color-blue));
}
.neural-connection--active {
stroke: var(--color-yellow);
opacity: 0.7;
stroke-dasharray: 5 5;
animation: drawStroke 3s linear infinite;
}
.ai-automations__neural-bg .glow-filter {
flood-color: var(--color-blue);
}
.ai-automations__roi-teaser {
position: relative;
z-index: var(--z-raised);
text-align: center;
margin-block-start: var(--space-10);
}
.ai-automations__roi-link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-yellow);
text-decoration: none;
transition: gap var(--transition-fast);
}
.ai-automations__roi-link:hover {
gap: var(--space-3);
}
.ai-automations__roi-link svg {
inline-size: 20px;
block-size: 20px;
}
.ai-automations__cta {
position: relative;
z-index: var(--z-raised);
text-align: center;
margin-block-start: var(--space-6);
}
.ai-automations__particles {
position: absolute;
inset: 0;
z-index: var(--z-base);
pointer-events: none;
overflow: hidden;
}
.data-particle {
position: absolute;
inline-size: 4px;
block-size: 4px;
border-radius: var(--radius-full);
background-color: var(--color-blue-light);
opacity: 0.4;
animation: float 8s ease-in-out infinite;
}
.data-particle--1 {
inset-block-start: 10%;
inset-inline-start: 15%;
animation-delay: 0s;
animation-duration: 7s;
}
.data-particle--2 {
inset-block-start: 20%;
inset-inline-end: 20%;
animation-delay: 1s;
animation-duration: 9s;
inline-size: 3px;
block-size: 3px;
}
.data-particle--3 {
inset-block-end: 30%;
inset-inline-start: 25%;
animation-delay: 2s;
animation-duration: 11s;
inline-size: 5px;
block-size: 5px;
background-color: var(--color-purple-light);
}
.data-particle--4 {
inset-block-start: 60%;
inset-inline-end: 10%;
animation-delay: 3s;
animation-duration: 8s;
}
.data-particle--5 {
inset-block-end: 15%;
inset-inline-end: 35%;
animation-delay: 4s;
animation-duration: 10s;
inline-size: 6px;
block-size: 6px;
background-color: var(--color-yellow);
opacity: 0.2;
}

/* ===== startup-mvp.css ===== */
.startup-mvp {
position: relative;
padding-block: var(--space-20);
background: linear-gradient(180deg, #ffffff 0%, #f0f4ff 50%, #ffffff 100%);
overflow: hidden;
}
.startup-mvp::before {
content: '';
position: absolute;
inset-block-start: 0;
inset-inline-start: 0;
inline-size: 100%;
block-size: 4px;
background: linear-gradient(to right, var(--color-blue), var(--color-blue-light), var(--color-blue));
}
.startup-mvp__header {
text-align: center;
margin-block-end: var(--space-12);
}
.startup-mvp__badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
background-color: var(--color-blue-50);
border: 1px solid var(--color-blue-200);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-blue);
margin-block-end: var(--space-4);
}
.startup-mvp__headline {
font-family: var(--font-display);
font-size: var(--text-4xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-4);
}
.startup-mvp__subhead {
font-size: var(--text-lg);
color: var(--color-dark-lighter);
max-inline-size: 600px;
margin-inline: auto;
line-height: var(--leading-relaxed);
}
.startup-mvp__pipeline {
position: relative;
max-inline-size: 1000px;
margin-inline: auto;
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.startup-mvp__timeline-line {
position: absolute;
inset-inline-start: 28px;
inset-block-start: 0;
inset-block-end: 0;
inline-size: 3px;
background-color: var(--color-light-dark);
border-radius: var(--radius-full);
overflow: hidden;
}
.startup-mvp__timeline-line-progress {
position: absolute;
inset-inline-start: 0;
inset-block-start: 0;
inline-size: 100%;
block-size: 0;
background: linear-gradient(to bottom, var(--color-blue), var(--color-blue-light));
border-radius: var(--radius-full);
transition: block-size 1.5s var(--ease-out-expo);
}
.startup-mvp__timeline-line-progress.active {
block-size: 100%;
}
.mvp-phase {
position: relative;
padding-inline-start: calc(56px + var(--space-6));
background-color: var(--color-light);
border-radius: var(--radius-xl);
padding: var(--space-6);
padding-inline-start: calc(56px + var(--space-6));
border: 1px solid var(--color-light-dark);
transition:
border-color var(--transition-base),
box-shadow var(--transition-base);
}
.mvp-phase:hover {
border-color: var(--color-blue-200);
box-shadow: var(--shadow-md);
}
.mvp-phase__badge {
position: absolute;
inset-inline-start: var(--space-6);
inset-block-start: var(--space-6);
display: flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-full);
background-color: var(--color-blue);
color: var(--color-white);
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
z-index: var(--z-raised);
box-shadow: var(--shadow-glow-blue);
}
.mvp-phase__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
margin-block-end: var(--space-3);
color: var(--color-blue);
}
.mvp-phase__icon svg {
inline-size: 48px;
block-size: 48px;
max-width: 48px;
max-height: 48px;
}
.mvp-phase__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-2);
}
.mvp-phase__duration {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-blue);
background-color: var(--color-blue-50);
border-radius: var(--radius-full);
white-space: nowrap;
margin-block-end: var(--space-3);
}
.mvp-phase__desc {
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-4);
}
.mvp-phase__deliverables {
display: flex;
flex-direction: column;
gap: var(--space-2);
list-style: none;
padding: 0;
margin: 0;
}
.mvp-phase__deliverable {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-dark);
}
.mvp-phase__deliverable svg {
flex-shrink: 0;
inline-size: 16px;
block-size: 16px;
color: var(--color-blue);
}
.startup-mvp__decorations {
position: absolute;
inset: 0;
pointer-events: none;
overflow: hidden;
z-index: var(--z-base);
}
.code-snippet {
position: absolute;
padding: var(--space-4) var(--space-5);
background-color: transparent;
border: 1px solid var(--color-blue-200);
border-radius: var(--radius-lg);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--color-blue-light);
opacity: 0.06;
white-space: pre;
line-height: var(--leading-relaxed);
}
.code-snippet--1 {
inset-block-start: 10%;
inset-inline-end: 5%;
transform: rotate(3deg);
}
.code-snippet--2 {
inset-block-end: 25%;
inset-inline-start: 3%;
transform: rotate(-2deg);
}
.code-snippet--3 {
inset-block-end: 10%;
inset-inline-end: 8%;
transform: rotate(1deg);
}
.code-kw {
color: var(--color-purple-light);
}
.code-fn {
color: var(--color-yellow);
}
.code-str {
color: var(--color-success);
}
.startup-mvp__selling-points {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-6);
margin-block-start: var(--space-10);
}
.startup-mvp__point {
display: flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-dark);
}
.startup-mvp__point svg {
flex-shrink: 0;
inline-size: 24px;
block-size: 24px;
color: var(--color-blue);
}
.startup-mvp__pricing-hint {
position: relative;
z-index: var(--z-raised);
margin-block-start: var(--space-6);
text-align: center;
font-size: var(--text-base);
font-weight: var(--weight-medium);
color: var(--color-dark-lighter);
}
.startup-mvp__cta {
position: relative;
z-index: var(--z-raised);
text-align: center;
margin-block-start: var(--space-6);
}

/* ===== lead-gen.css ===== */
.exit-popup {
position: fixed;
inset: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-4);
opacity: 0;
visibility: hidden;
transition:
opacity var(--transition-base),
visibility var(--transition-base);
}
.exit-popup--visible,
.exit-popup.popup--active {
opacity: 1;
visibility: visible;
}
.exit-popup__overlay {
position: absolute;
inset: 0;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.exit-popup__content {
position: relative;
z-index: var(--z-raised);
inline-size: 100%;
max-inline-size: 520px;
background-color: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-10);
box-shadow: var(--shadow-2xl);
text-align: center;
transform: scale(0.9) translateY(20px);
transition: transform var(--transition-slow) var(--ease-spring);
}
.exit-popup--visible .exit-popup__content {
transform: scale(1) translateY(0);
}
.exit-popup__close {
position: absolute;
inset-block-start: var(--space-4);
inset-inline-end: var(--space-4);
display: flex;
align-items: center;
justify-content: center;
inline-size: 36px;
block-size: 36px;
border-radius: var(--radius-full);
background-color: var(--color-light);
color: var(--color-dark-lighter);
border: none;
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.exit-popup__close:hover {
background-color: var(--color-error);
color: var(--color-white);
}
.exit-popup__icon {
font-size: 2.5rem;
margin-block-end: var(--space-4);
}
.exit-popup__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-3);
}
.exit-popup__text {
font-size: var(--text-base);
color: var(--color-dark-light);
margin-block-end: var(--space-6);
line-height: var(--leading-relaxed);
}
.exit-popup__form {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.exit-popup__input {
padding: var(--space-3) var(--space-4);
font-size: var(--text-base);
border: 2px solid var(--color-light-dark);
border-radius: var(--radius-md);
transition:
border-color var(--transition-fast),
box-shadow var(--transition-fast);
}
.exit-popup__input:focus {
outline: none;
border-color: var(--color-blue);
box-shadow: 0 0 0 3px var(--color-blue-200);
}
.exit-popup__disclaimer {
font-size: var(--text-xs);
color: var(--color-dark-lighter);
margin-block-start: var(--space-2);
}
.floating-actions {
position: fixed;
inset-block-end: var(--space-6);
inset-inline-end: var(--space-6);
z-index: var(--z-floating-btn);
display: flex;
flex-direction: column;
align-items: flex-end;
gap: var(--space-3);
}
.floating-btn {
display: flex;
align-items: center;
justify-content: center;
inline-size: 56px;
block-size: 56px;
border-radius: var(--radius-full);
border: none;
cursor: pointer;
box-shadow: var(--shadow-lg);
color: var(--color-white);
font-size: 1.5rem;
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast);
animation: bounce 3s ease-in-out infinite;
text-decoration: none;
}
.floating-btn:hover {
transform: scale(1.1);
box-shadow: var(--shadow-xl);
}
.floating-btn:active {
transform: scale(0.95);
}
.floating-btn--whatsapp {
background-color: var(--color-whatsapp);
animation-delay: 0s;
}
.floating-btn--whatsapp:hover {
background-color: #20bd5a;
color: var(--color-white);
}
.floating-btn--phone {
background-color: var(--color-phone);
animation-delay: 0.5s;
}
.floating-btn--phone:hover {
background-color: var(--color-blue-dark);
color: var(--color-white);
}
.floating-btn svg {
inline-size: 28px;
block-size: 28px;
}
.floating-btn__label {
position: absolute;
inset-inline-end: calc(100% + var(--space-3));
padding: var(--space-2) var(--space-3);
background-color: var(--color-dark-darker);
color: var(--color-white);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
border-radius: var(--radius-md);
white-space: nowrap;
opacity: 0;
visibility: hidden;
transform: translateX(8px);
transition:
opacity var(--transition-fast),
visibility var(--transition-fast),
transform var(--transition-fast);
pointer-events: none;
}
.floating-btn:hover .floating-btn__label {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.multistep-form {
max-inline-size: 600px;
margin-inline: auto;
}
.multistep-form__steps {
position: relative;
overflow: hidden;
}
.multistep-form__step {
display: none;
animation: fadeUp 0.4s var(--ease-out-expo) forwards;
}
.multistep-form__step--active {
display: block;
}
.multistep-form__step-title {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-2);
}
.multistep-form__step-subtitle {
font-size: var(--text-base);
color: var(--color-dark-lighter);
margin-block-end: var(--space-6);
}
.multistep-form__nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-block-start: var(--space-6);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-light-dark);
}
.multistep-form__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
color: var(--color-dark-lighter);
background: none;
border: none;
cursor: pointer;
border-radius: var(--radius-md);
transition:
color var(--transition-fast),
background-color var(--transition-fast);
}
.multistep-form__back:hover {
color: var(--color-dark);
background-color: var(--color-light);
}
.multistep-form__next {
margin-inline-start: auto;
}
.form-group--error .form-input,
.form-group--error .form-textarea,
.form-group--error .form-select {
border-color: var(--color-error);
animation: shake 0.4s ease;
}
.form-group--error .form-label {
color: var(--color-error);
}
.form-group--error .form-error {
display: block;
color: var(--color-error);
font-size: var(--text-sm);
margin-block-start: var(--space-1);
}
.form-success {
text-align: center;
padding: var(--space-10);
animation: scaleIn 0.5s var(--ease-spring) forwards;
}
.form-success__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 72px;
block-size: 72px;
margin-inline: auto;
margin-block-end: var(--space-5);
border-radius: var(--radius-full);
background-color: rgba(34, 197, 94, 0.1);
color: var(--color-success);
font-size: 2rem;
}
.form-success__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-3);
}
.form-success__text {
font-size: var(--text-base);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
max-inline-size: 400px;
margin-inline: auto;
}
.lead-bar {
position: fixed;
inset-block-end: 0;
inset-inline: 0;
z-index: var(--z-overlay);
background-color: var(--color-dark-darker);
padding: var(--space-4) var(--container-padding);
transform: translateY(100%);
transition: transform var(--transition-slow) var(--ease-out-expo);
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.2);
}
.lead-bar--visible {
transform: translateY(0);
}
.lead-bar__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
max-inline-size: var(--container-max);
margin-inline: auto;
}
.lead-bar__text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.85);
font-weight: var(--weight-medium);
text-align: center;
}
.lead-bar__form {
display: flex;
gap: var(--space-2);
inline-size: 100%;
max-inline-size: 400px;
}
.lead-bar__input {
flex: 1;
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.1);
color: var(--color-white);
}
.lead-bar__input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.lead-bar__input:focus {
outline: none;
border-color: var(--color-yellow);
}
.lead-bar__close {
position: absolute;
inset-block-start: var(--space-2);
inset-inline-end: var(--space-4);
inline-size: 24px;
block-size: 24px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: rgba(255, 255, 255, 0.5);
cursor: pointer;
font-size: 1.25rem;
transition: color var(--transition-fast);
}
.lead-bar__close:hover {
color: var(--color-white);
}
.floating-cta {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 1000;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.floating-cta__btn {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 9999px;
border: none;
cursor: pointer;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08), 0 4px 6px rgba(0, 0, 0, 0.05);
color: var(--color-white);
font-size: 1.5rem;
text-decoration: none;
transition:
transform var(--transition-fast),
box-shadow var(--transition-fast);
}
.floating-cta__btn:hover {
transform: scale(1.1);
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1), 0 8px 10px rgba(0, 0, 0, 0.04);
}
.floating-cta__btn--whatsapp {
background-color: #25D366;
}
.floating-cta__btn--whatsapp:hover {
background-color: #20bd5a;
color: var(--color-white);
}
.floating-cta__btn--phone {
background-color: var(--color-white);
color: var(--color-blue);
}
.floating-cta__btn--phone:hover {
background-color: var(--color-yellow);
color: var(--color-dark-darker);
}
.floating-cta__btn svg {
width: 28px;
height: 28px;
}

/* ===== pages.css ===== */
.page-hero {
background: var(--gradient-hero);
padding-block: calc(var(--header-height) + var(--space-16)) var(--space-16);
text-align: center;
position: relative;
overflow: hidden;
}
.page-hero--compact {
padding-block: calc(var(--header-height) + var(--space-10)) var(--space-12);
}
.page-hero__bg {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.06) 1px, transparent 1px),
radial-gradient(circle at 70% 60%, rgba(255,255,255,0.04) 1.5px, transparent 1.5px),
radial-gradient(circle at 50% 80%, rgba(255,255,255,0.05) 1px, transparent 1px);
background-size: 100px 100px, 150px 150px, 120px 120px;
}
.page-hero__content {
position: relative;
z-index: var(--z-raised);
}
.page-hero__title {
font-size: var(--text-4xl);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.page-hero__subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-inline-size: 640px;
margin-inline: auto;
line-height: var(--leading-relaxed);
}
.cta-section {
background: var(--gradient-hero);
padding-block: var(--space-20);
text-align: center;
}
.cta-section__title {
font-size: var(--text-3xl);
color: var(--color-white);
margin-block-end: var(--space-4);
}
.cta-section__text {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-inline-size: 600px;
margin-inline: auto;
margin-block-end: var(--space-8);
line-height: var(--leading-relaxed);
}
.cta-section__buttons {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.services-page__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-6);
}
.service-detail-card {
background-color: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.service-detail-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.service-detail-card--primary {
border: 3px solid transparent;
background-image: linear-gradient(white, white), var(--gradient-hero);
background-origin: border-box;
background-clip: padding-box, border-box;
padding: var(--space-10);
}
.service-detail-card__badge {
display: inline-block;
background: var(--gradient-hero);
color: var(--color-white);
padding: var(--space-1) var(--space-4);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-block-end: var(--space-4);
}
.service-detail-card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 64px;
block-size: 64px;
border-radius: var(--radius-lg);
background-color: var(--color-blue-100);
color: var(--color-blue);
margin-block-end: var(--space-4);
}
.service-detail-card__icon svg {
inline-size: 32px;
block-size: 32px;
}
.service-detail-card__title {
font-size: var(--text-2xl);
margin-block-end: var(--space-3);
}
.service-detail-card__desc {
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-6);
}
.service-detail-card__features {
margin-block-end: var(--space-6);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.service-detail-card__features li {
padding-inline-start: var(--space-6);
position: relative;
font-size: var(--text-sm);
color: var(--color-dark-light);
line-height: var(--leading-normal);
}
.service-detail-card__features li::before {
content: '\2713';
position: absolute;
inset-inline-start: 0;
color: var(--color-blue);
font-weight: var(--weight-bold);
}
.service-detail-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--weight-semibold);
color: var(--color-blue);
transition: gap var(--transition-base);
}
.service-detail-card__link:hover {
gap: var(--space-3);
color: var(--color-blue-dark);
}
.service-detail-card__link svg {
inline-size: 16px;
block-size: 16px;
}
.ai-page-hero {
background: var(--gradient-ai);
padding-block: calc(var(--header-height) + var(--space-16)) var(--space-16);
text-align: center;
position: relative;
overflow: hidden;
}
.ai-page-hero__particles {
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 1px, transparent 1px),
radial-gradient(circle at 80% 20%, rgba(255,255,255,0.06) 1px, transparent 1px),
radial-gradient(circle at 50% 80%, rgba(255,255,255,0.04) 2px, transparent 2px),
radial-gradient(circle at 10% 70%, rgba(255,255,255,0.07) 1px, transparent 1px),
radial-gradient(circle at 90% 60%, rgba(255,255,255,0.05) 1.5px, transparent 1.5px);
background-size: 100px 100px, 150px 150px, 200px 200px, 120px 120px, 180px 180px;
animation: particles-float 20s linear infinite;
}
@keyframes particles-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
.ai-page-hero__neural {
position: absolute;
inset: 0;
overflow: hidden;
}
.ai-page-hero__neural svg {
inline-size: 100%;
block-size: 100%;
}
.ai-page-hero__content {
position: relative;
z-index: var(--z-raised);
}
.ai-page-hero__title {
font-size: var(--text-5xl);
color: var(--color-white);
margin-block: var(--space-4) var(--space-4);
}
.ai-page-hero__subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-inline-size: 700px;
margin-inline: auto;
margin-block-end: var(--space-8);
line-height: var(--leading-relaxed);
}
.ai-page-hero__ctas {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.ai-services-list {
display: flex;
flex-direction: column;
gap: var(--space-10);
}
.ai-service-detail {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-10);
align-items: center;
padding-block: var(--space-8);
border-block-end: 1px solid var(--color-light-dark);
}
.ai-service-detail:last-child {
border-block-end: none;
}
.ai-service-detail--reverse {
direction: rtl;
}
.ai-service-detail--reverse > * {
direction: ltr;
}
.ai-service-detail__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 72px;
block-size: 72px;
border-radius: var(--radius-xl);
background-color: var(--color-blue-100);
color: var(--color-blue);
margin-block-end: var(--space-4);
}
.ai-service-detail__icon svg {
inline-size: 36px;
block-size: 36px;
}
.ai-service-detail__title {
font-size: var(--text-2xl);
margin-block-end: var(--space-3);
}
.ai-service-detail__desc {
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-5);
}
.ai-service-detail__usecases {
margin-block-end: var(--space-5);
}
.ai-service-detail__usecases-label {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-blue);
margin-block-end: var(--space-2);
}
.ai-service-detail__usecases ul li {
padding-block: var(--space-1);
padding-inline-start: var(--space-5);
position: relative;
color: var(--color-dark-light);
font-size: var(--text-sm);
}
.ai-service-detail__usecases ul li::before {
content: '\25B8';
position: absolute;
inset-inline-start: 0;
color: var(--color-blue);
}
.ai-service-detail__benefits {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.ai-service-detail__benefit-tag {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-blue-100);
color: var(--color-blue-dark);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.ai-service-detail__visual {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-light);
border-radius: var(--radius-xl);
min-block-size: 280px;
color: var(--color-blue);
opacity: 0.2;
}
.ai-service-detail__visual svg {
inline-size: 120px;
block-size: 120px;
}
.ai-roi__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.ai-roi__stat {
text-align: center;
padding: var(--space-8);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.ai-roi__number {
font-size: var(--text-4xl);
font-weight: var(--weight-extrabold);
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-block-end: var(--space-2);
}
.ai-roi__label {
color: var(--color-dark-lighter);
font-size: var(--text-sm);
}
.ai-process__steps {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.ai-process__step {
text-align: center;
}
.ai-process__step-num {
display: flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border-radius: var(--radius-full);
background: var(--gradient-hero);
color: var(--color-white);
font-weight: var(--weight-bold);
font-size: var(--text-lg);
margin: 0 auto var(--space-4);
}
.ai-process__step-title {
font-size: var(--text-lg);
margin-block-end: var(--space-2);
}
.ai-process__step-text {
color: var(--color-dark-lighter);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.ai-case-study__image {
block-size: 160px;
background-color: var(--color-light);
border-radius: var(--radius-md);
display: flex;
align-items: center;
justify-content: center;
margin-block-end: var(--space-4);
}
.ai-case-study__placeholder {
color: var(--color-dark-lighter);
font-size: var(--text-sm);
}
.mvp-page-hero {
background: var(--gradient-hero);
padding-block: calc(var(--header-height) + var(--space-16)) var(--space-16);
text-align: center;
position: relative;
overflow: hidden;
}
.mvp-page-hero__decorations {
position: absolute;
inset: 0;
pointer-events: none;
}
.code-snippet--float-1,
.code-snippet--float-2,
.code-snippet--float-3 {
position: absolute;
font-family: var(--font-mono);
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.25);
background-color: rgba(255, 255, 255, 0.05);
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
white-space: nowrap;
}
.code-snippet--float-1 { inset-block-start: 20%; inset-inline-start: 5%; }
.code-snippet--float-2 { inset-block-start: 60%; inset-inline-end: 8%; }
.code-snippet--float-3 { inset-block-end: 15%; inset-inline-start: 10%; }
.code-kw { color: rgba(255, 190, 0, 0.8); }
.code-fn { color: rgba(34, 100, 245, 0.9); }
.code-str { color: rgba(34, 197, 94, 0.8); }
.mvp-page-hero__content {
position: relative;
z-index: var(--z-raised);
}
.mvp-page-hero__title {
font-size: var(--text-5xl);
color: var(--color-white);
margin-block: var(--space-4) var(--space-4);
}
.mvp-page-hero__subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-inline-size: 700px;
margin-inline: auto;
margin-block-end: var(--space-8);
line-height: var(--leading-relaxed);
}
.mvp-page-hero__ctas {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.mvp-pipeline {
display: flex;
flex-direction: column;
gap: var(--space-8);
}
.mvp-pipeline__phase {
background-color: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-card);
border-inline-start: 4px solid var(--color-blue);
}
.mvp-pipeline__phase[data-phase="2"] {
border-inline-start-color: var(--color-purple);
}
.mvp-pipeline__phase[data-phase="3"] {
border-inline-start-color: var(--color-yellow);
}
.mvp-pipeline__phase-header {
display: flex;
align-items: center;
gap: var(--space-4);
margin-block-end: var(--space-4);
}
.mvp-pipeline__phase-badge {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-blue-100);
color: var(--color-blue-dark);
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-bold);
text-transform: uppercase;
}
.mvp-pipeline__phase[data-phase="2"] .mvp-pipeline__phase-badge {
background-color: var(--color-purple-100);
color: var(--color-purple);
}
.mvp-pipeline__phase[data-phase="3"] .mvp-pipeline__phase-badge {
background-color: var(--color-yellow-100);
color: var(--color-yellow-dark);
}
.mvp-pipeline__phase-duration {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-dark-lighter);
}
.mvp-pipeline__phase-title {
font-size: var(--text-2xl);
margin-block-end: var(--space-3);
}
.mvp-pipeline__phase-desc {
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-5);
}
.mvp-pipeline__includes-label {
font-size: var(--text-sm);
font-weight: var(--weight-bold);
color: var(--color-dark);
margin-block-end: var(--space-3);
}
.mvp-pipeline__includes {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2);
}
.mvp-pipeline__includes li {
display: flex;
align-items: flex-start;
gap: var(--space-2);
font-size: var(--text-sm);
color: var(--color-dark-light);
}
.mvp-pipeline__includes li svg {
flex-shrink: 0;
color: var(--color-blue);
margin-block-start: 2px;
}
.mvp-pricing__card {
background-color: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-10);
box-shadow: var(--shadow-card);
text-align: center;
}
.mvp-pricing__card-title {
font-size: var(--text-2xl);
margin-block-end: var(--space-4);
}
.mvp-pricing__card-text {
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
margin-block-end: var(--space-6);
max-inline-size: 600px;
margin-inline: auto;
}
.mvp-pricing__benefits {
text-align: start;
max-inline-size: 500px;
margin-inline: auto;
}
.mvp-pricing__benefits li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-block: var(--space-2);
font-size: var(--text-base);
color: var(--color-dark-light);
}
.mvp-pricing__benefits li svg {
flex-shrink: 0;
color: var(--color-blue);
margin-block-start: 3px;
}
.mvp-ideal-client {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-8);
}
.mvp-ideal-client__heading {
font-size: var(--text-xl);
margin-block-end: var(--space-5);
}
.mvp-ideal-client__heading--yes {
color: var(--color-blue);
}
.mvp-ideal-client__heading--no {
color: var(--color-error);
}
.mvp-ideal-client__list li {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding-block: var(--space-2);
color: var(--color-dark-light);
}
.mvp-ideal-client__list li svg {
flex-shrink: 0;
color: var(--color-blue);
margin-block-start: 3px;
}
.mvp-ideal-client__list--no li svg {
color: var(--color-error);
}
.mvp-stats__item {
text-align: center;
padding: var(--space-6);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.mvp-stats__number {
font-size: var(--text-3xl);
font-weight: var(--weight-extrabold);
color: var(--color-blue);
display: block;
margin-block-end: var(--space-1);
}
.mvp-stats__label {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
}
.erp-page-hero {
background: var(--gradient-hero-reverse);
padding-block: calc(var(--header-height) + var(--space-16)) var(--space-16);
text-align: center;
position: relative;
overflow: hidden;
}
.erp-page-hero__content {
position: relative;
z-index: var(--z-raised);
}
.erp-page-hero__title {
font-size: var(--text-4xl);
color: var(--color-white);
margin-block: var(--space-4) var(--space-4);
}
.erp-page-hero__subtitle {
font-size: var(--text-lg);
color: rgba(255, 255, 255, 0.85);
max-inline-size: 700px;
margin-inline: auto;
margin-block-end: var(--space-8);
line-height: var(--leading-relaxed);
}
.erp-page-hero__ctas {
display: flex;
justify-content: center;
gap: var(--space-4);
flex-wrap: wrap;
}
.erp-modules-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.erp-module-card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-6);
box-shadow: var(--shadow-card);
text-align: center;
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.erp-module-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.erp-module-card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 56px;
block-size: 56px;
margin: 0 auto var(--space-4);
border-radius: var(--radius-lg);
background-color: var(--color-purple-100);
color: var(--color-purple);
}
.erp-module-card__icon svg {
inline-size: 24px;
block-size: 24px;
}
.erp-module-card__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-2);
}
.erp-module-card__text {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
line-height: var(--leading-normal);
}
.erp-methodology {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.erp-methodology__step {
text-align: center;
}
.erp-methodology__step-num {
display: flex;
align-items: center;
justify-content: center;
inline-size: 48px;
block-size: 48px;
border-radius: var(--radius-full);
background: var(--gradient-hero-reverse);
color: var(--color-white);
font-weight: var(--weight-bold);
font-size: var(--text-lg);
margin: 0 auto var(--space-4);
}
.erp-methodology__step-title {
font-size: var(--text-lg);
margin-block-end: var(--space-2);
}
.erp-methodology__step-text {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
line-height: var(--leading-normal);
}
.erp-industry-tag {
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
background-color: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.erp-industry-tag svg {
color: var(--color-purple);
flex-shrink: 0;
}
.erp-migration__list {
margin-block-start: var(--space-4);
}
.erp-migration__list li {
padding-block: var(--space-2);
padding-inline-start: var(--space-6);
position: relative;
color: var(--color-dark-light);
}
.erp-migration__list li::before {
content: '\2713';
position: absolute;
inset-inline-start: 0;
color: var(--color-purple);
font-weight: var(--weight-bold);
}
.erp-clients {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: var(--space-6);
align-items: center;
}
.erp-clients__logo {
display: flex;
align-items: center;
justify-content: center;
block-size: 80px;
background-color: var(--color-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-xs);
}
.erp-clients__placeholder {
font-size: var(--text-xs);
color: var(--color-dark-lighter);
}
.contact-page-layout {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: var(--space-12);
align-items: start;
}
.contact-page__info-title {
font-size: var(--text-2xl);
margin-block-end: var(--space-2);
}
.contact-page__info-text {
color: var(--color-dark-lighter);
margin-block-end: var(--space-6);
}
.contact-info-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-4);
background-color: var(--color-light);
border-radius: var(--radius-md);
margin-block-end: var(--space-3);
transition: background-color var(--transition-fast);
text-decoration: none;
color: inherit;
}
.contact-info-card:hover {
background-color: var(--color-blue-50);
}
.contact-info-card--whatsapp:hover {
background-color: rgba(37, 211, 102, 0.1);
}
.contact-info-card__icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
border-radius: var(--radius-md);
background-color: var(--color-white);
color: var(--color-blue);
flex-shrink: 0;
box-shadow: var(--shadow-xs);
}
.contact-info-card--whatsapp .contact-info-card__icon {
color: var(--color-whatsapp);
}
.contact-info-card__label {
display: block;
font-size: var(--text-xs);
color: var(--color-dark-lighter);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-block-end: 2px;
}
.contact-info-card__value {
font-weight: var(--weight-semibold);
color: var(--color-dark);
}
.contact-hours {
margin-block-start: var(--space-6);
padding: var(--space-5);
background-color: var(--color-light);
border-radius: var(--radius-md);
}
.contact-hours__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-3);
}
.contact-hours__row {
display: flex;
justify-content: space-between;
padding-block: var(--space-2);
border-block-end: 1px solid rgba(0, 0, 0, 0.06);
font-size: var(--text-sm);
}
.contact-hours__row:last-child {
border-block-end: none;
}
.contact-social {
margin-block-start: var(--space-6);
}
.contact-social__title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-3);
}
.contact-form-wrapper {
background-color: var(--color-white);
border-radius: var(--radius-xl);
padding: var(--space-8);
box-shadow: var(--shadow-lg);
}
.contact-form-wrapper__title {
font-size: var(--text-xl);
margin-block-end: var(--space-6);
}
.form-step {
display: none;
}
.form-step--active {
display: block;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-4);
}
.form-nav {
display: flex;
justify-content: space-between;
margin-block-start: var(--space-6);
}
.form-success {
text-align: center;
padding: var(--space-10);
color: var(--color-success);
}
.form-success svg {
margin: 0 auto var(--space-4);
}
.form-success h3 {
font-size: var(--text-xl);
color: var(--color-dark);
margin-block-end: var(--space-2);
}
.form-success p {
color: var(--color-dark-lighter);
}
.contact-map {
border-radius: var(--radius-xl);
overflow: hidden;
block-size: 400px;
background-color: var(--color-light);
margin-block-start: var(--space-8);
}
.contact-map iframe {
inline-size: 100%;
block-size: 100%;
border: 0;
}
.contact-info-card__map {
block-size: 220px;
border-radius: var(--radius-lg);
overflow: hidden;
background-color: var(--color-light);
margin-block-start: var(--space-6);
}
.contact-info-card__map iframe {
inline-size: 100%;
block-size: 100%;
border: 0;
display: block;
}
.contact-map__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
block-size: 100%;
gap: var(--space-3);
color: var(--color-dark-lighter);
}
.portfolio-filters {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-end: var(--space-8);
}
.portfolio-filters__btn {
padding: var(--space-2) var(--space-5);
border-radius: var(--radius-full);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-dark);
background-color: var(--color-light);
border: none;
cursor: pointer;
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.portfolio-filters__btn:hover,
.portfolio-filters__btn.is-active {
background-color: var(--color-blue);
color: var(--color-white);
}
.portfolio-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-6);
}
.portfolio-item {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
aspect-ratio: 4 / 3;
background-color: var(--color-light);
}
.portfolio-item__image-wrap {
position: relative;
inline-size: 100%;
block-size: 100%;
}
.portfolio-item__image-wrap img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.portfolio-item:hover .portfolio-item__image-wrap img {
transform: scale(1.05);
}
.portfolio-item__placeholder {
display: flex;
align-items: center;
justify-content: center;
inline-size: 100%;
block-size: 100%;
color: var(--color-dark-lighter);
}
.portfolio-item__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 30%, rgba(34, 100, 245, 0.9) 100%);
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: var(--space-6);
opacity: 0;
transition: opacity var(--transition-base);
}
.portfolio-item:hover .portfolio-item__overlay {
opacity: 1;
}
.portfolio-item__category {
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-yellow);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-1);
}
.portfolio-item__title {
font-size: var(--text-lg);
color: var(--color-white);
margin-block-end: var(--space-2);
}
.portfolio-item__title a {
color: var(--color-white);
}
.portfolio-item__tech {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
}
.portfolio-item__tech-tag {
display: inline-block;
padding: var(--space-1) var(--space-2);
background-color: rgba(255, 255, 255, 0.2);
color: var(--color-white);
border-radius: var(--radius-sm);
font-size: var(--text-xs);
}
.portfolio-empty {
padding-block: var(--space-16);
}
.portfolio-empty svg {
margin: 0 auto var(--space-6);
color: var(--color-dark-lighter);
}
.portfolio-empty h2 {
margin-block-end: var(--space-3);
}
.portfolio-empty .text-lead {
margin-block-end: var(--space-6);
}
.about-story {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-12);
align-items: center;
}
.about-story__image {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-light);
border-radius: var(--radius-xl);
min-block-size: 400px;
color: var(--color-blue);
opacity: 0.2;
}
.mission-vision {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
}
.mission-vision__card {
padding: var(--space-8);
border-radius: var(--radius-xl);
background-color: var(--color-white);
box-shadow: var(--shadow-card);
border-block-start: 4px solid var(--color-blue);
}
.mission-vision__card:nth-child(2) {
border-block-start-color: var(--color-purple);
}
.mission-vision__card h3 {
margin-block: var(--space-3) var(--space-4);
}
.team-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.team-member {
text-align: center;
}
.team-member__photo {
inline-size: 140px;
block-size: 140px;
border-radius: var(--radius-full);
margin: 0 auto var(--space-4);
background-color: var(--color-light);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-dark-lighter);
overflow: hidden;
}
.team-member__photo img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.team-member__name {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-1);
}
.team-member__role {
font-size: var(--text-sm);
color: var(--color-blue);
}
.timeline {
position: relative;
padding-inline-start: var(--space-8);
}
.timeline::before {
content: '';
position: absolute;
inset-inline-start: 0;
inset-block: 0;
inline-size: 3px;
background: var(--gradient-hero);
border-radius: 2px;
}
.timeline__item {
position: relative;
padding-block-end: var(--space-8);
padding-inline-start: var(--space-6);
}
.timeline__item::before {
content: '';
position: absolute;
inset-inline-start: calc(-1 * var(--space-8));
inset-block-start: 0.35rem;
inline-size: 13px;
block-size: 13px;
border-radius: var(--radius-full);
background-color: var(--color-blue);
border: 3px solid var(--color-white);
box-shadow: 0 0 0 2px var(--color-blue);
}
.timeline__year {
font-size: var(--text-xs);
font-weight: var(--weight-bold);
color: var(--color-blue);
text-transform: uppercase;
margin-block-end: var(--space-1);
display: block;
}
.timeline__title {
font-size: var(--text-lg);
margin-block-end: var(--space-1);
}
.timeline__text {
color: var(--color-dark-lighter);
font-size: var(--text-sm);
line-height: var(--leading-normal);
}
.partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-6);
}
.partner-badge {
display: flex;
align-items: center;
justify-content: center;
padding: var(--space-6);
background-color: var(--color-white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
text-align: center;
}
.partner-badge__text {
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--color-dark-light);
}
.blog-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: var(--space-10);
align-items: start;
}
.blog-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.blog-card {
background-color: var(--color-white);
border-radius: var(--radius-lg);
overflow: hidden;
box-shadow: var(--shadow-card);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.blog-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.blog-card__image {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: var(--color-light);
}
.blog-card__image img,
.blog-card__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.blog-card:hover .blog-card__image img,
.blog-card:hover .blog-card__img {
transform: scale(1.05);
}
.blog-card__body {
padding: var(--space-5);
}
.blog-card__meta {
display: flex;
align-items: center;
gap: var(--space-3);
font-size: var(--text-xs);
color: var(--color-dark-lighter);
margin-block-end: var(--space-2);
}
.blog-card__category {
color: var(--color-blue);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.blog-card__title {
font-size: var(--text-lg);
margin-block-end: var(--space-2);
line-height: var(--leading-snug);
}
.blog-card__title--sm {
font-size: var(--text-base);
}
.blog-card__title a {
color: var(--color-dark-darker);
text-decoration: none;
}
.blog-card__title a:hover {
color: var(--color-blue);
}
.blog-card__excerpt {
color: var(--color-dark-lighter);
font-size: var(--text-sm);
line-height: var(--leading-normal);
margin-block-end: var(--space-3);
}
.blog-card__readmore {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
color: var(--color-blue);
transition: gap var(--transition-base);
}
.blog-card__readmore:hover {
gap: var(--space-3);
}
.single-hero {
position: relative;
block-size: 400px;
display: flex;
align-items: flex-end;
overflow: hidden;
background-color: var(--color-dark);
}
.single-hero__image {
position: absolute;
inset: 0;
}
.single-hero__image img,
.single-hero__img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0.5;
}
.single-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, 0.7) 100%);
}
.single-hero__content {
position: relative;
z-index: var(--z-raised);
padding-block-end: var(--space-8);
}
.single-hero__meta {
display: flex;
align-items: center;
gap: var(--space-4);
color: rgba(255, 255, 255, 0.7);
font-size: var(--text-sm);
margin-block-end: var(--space-3);
}
.single-hero__category {
color: var(--color-yellow);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.single-hero__title {
font-size: var(--text-4xl);
color: var(--color-white);
max-inline-size: 800px;
}
.post-content__body {
font-size: var(--text-md);
line-height: var(--leading-relaxed);
color: var(--color-dark-light);
}
.post-content__body h2,
.post-content__body h3,
.post-content__body h4 {
margin-block-start: var(--space-8);
margin-block-end: var(--space-4);
}
.post-content__body p {
margin-block-end: var(--space-5);
}
.post-content__body ul,
.post-content__body ol {
margin-block-end: var(--space-5);
padding-inline-start: var(--space-6);
}
.post-content__body ul { list-style: disc; }
.post-content__body ol { list-style: decimal; }
.post-content__body li {
margin-block-end: var(--space-2);
}
.post-content__body img {
border-radius: var(--radius-md);
margin-block: var(--space-6);
}
.post-content__body blockquote {
margin-block: var(--space-6);
}
.post-tags {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2);
margin-block-start: var(--space-8);
padding-block-start: var(--space-6);
border-block-start: 1px solid var(--color-light-dark);
}
.post-tags__label {
font-weight: var(--weight-semibold);
font-size: var(--text-sm);
}
.post-tags__tag {
display: inline-block;
padding: var(--space-1) var(--space-3);
background-color: var(--color-light);
border-radius: var(--radius-full);
font-size: var(--text-xs);
color: var(--color-dark-light);
transition: background-color var(--transition-fast);
}
.post-tags__tag:hover {
background-color: var(--color-blue-100);
color: var(--color-blue);
}
.author-box {
display: flex;
align-items: flex-start;
gap: var(--space-5);
padding: var(--space-6);
background-color: var(--color-light);
border-radius: var(--radius-lg);
margin-block-start: var(--space-8);
}
.author-box__avatar {
flex-shrink: 0;
border-radius: var(--radius-full);
overflow: hidden;
}
.author-box__avatar img {
border-radius: var(--radius-full);
}
.author-box__label {
font-size: var(--text-xs);
color: var(--color-dark-lighter);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-block-end: var(--space-1);
display: block;
}
.author-box__name {
font-size: var(--text-lg);
margin-block-end: var(--space-2);
}
.author-box__name a {
color: var(--color-dark-darker);
}
.author-box__bio {
font-size: var(--text-sm);
color: var(--color-dark-lighter);
line-height: var(--leading-normal);
}
.post-nav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-6);
padding-block: var(--space-8);
border-block-start: 1px solid var(--color-light-dark);
margin-block-start: var(--space-8);
}
.post-nav__link {
display: block;
padding: var(--space-4);
border-radius: var(--radius-md);
background-color: var(--color-light);
text-decoration: none;
transition: background-color var(--transition-fast);
}
.post-nav__link:hover {
background-color: var(--color-blue-50);
}
.post-nav__link--next {
text-align: end;
}
.post-nav__label {
display: block;
font-size: var(--text-xs);
color: var(--color-dark-lighter);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
margin-block-end: var(--space-1);
}
.post-nav__title {
font-weight: var(--weight-semibold);
color: var(--color-dark);
font-size: var(--text-sm);
}
.post-nav__link:hover .post-nav__title {
color: var(--color-blue);
}
.related-posts {
padding-block-start: var(--space-8);
border-block-start: 1px solid var(--color-light-dark);
margin-block-start: var(--space-8);
}
.related-posts__title {
font-size: var(--text-xl);
margin-block-end: var(--space-6);
}
.related-posts__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--space-5);
}
.blog-card--compact .blog-card__image {
aspect-ratio: 16 / 9;
}
.blog-card--compact .blog-card__body {
padding: var(--space-3);
}
.sidebar {
position: sticky;
inset-block-start: calc(var(--header-height) + var(--space-4));
}
.widget {
background-color: var(--color-white);
border-radius: var(--radius-lg);
padding: var(--space-6);
margin-block-end: var(--space-6);
box-shadow: var(--shadow-card);
border: 1px solid rgba(0, 0, 0, 0.04);
}
.widget__title {
font-size: var(--text-lg);
margin-block-end: var(--space-4);
padding-block-end: var(--space-3);
border-block-end: 2px solid var(--color-blue);
}
.widget__list li {
padding-block: var(--space-2);
border-block-end: 1px solid rgba(0, 0, 0, 0.04);
}
.widget__list li:last-child {
border-block-end: none;
}
.widget__list li a {
color: var(--color-dark);
font-size: var(--text-sm);
}
.widget__list li a:hover {
color: var(--color-blue);
}
.widget--cta {
background: var(--gradient-hero);
color: var(--color-white);
}
.widget--cta .widget__title {
color: var(--color-white);
border-block-end-color: rgba(255, 255, 255, 0.3);
}
.widget--cta .widget__text {
color: rgba(255, 255, 255, 0.85);
font-size: var(--text-sm);
margin-block-end: var(--space-4);
}
.search-form {
display: flex;
gap: 0;
max-inline-size: 500px;
}
.search-form__input {
flex: 1;
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.search-form__btn {
border-start-start-radius: 0;
border-end-start-radius: 0;
padding-inline: var(--space-4);
}
.search-results-list {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
.search-result {
padding: var(--space-5);
background-color: var(--color-white);
border-radius: var(--radius-md);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: box-shadow var(--transition-fast);
}
.search-result:hover {
box-shadow: var(--shadow-md);
}
.search-result__type {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
text-transform: uppercase;
letter-spacing: var(--tracking-wider);
color: var(--color-blue);
margin-block-end: var(--space-2);
}
.search-result__title {
font-size: var(--text-lg);
margin-block-end: var(--space-2);
}
.search-result__title a {
color: var(--color-dark-darker);
}
.search-result__title a:hover {
color: var(--color-blue);
}
.search-result__excerpt {
color: var(--color-dark-lighter);
font-size: var(--text-sm);
line-height: var(--leading-normal);
margin-block-end: var(--space-3);
}
.search-result__meta {
display: flex;
align-items: center;
justify-content: space-between;
font-size: var(--text-xs);
color: var(--color-dark-lighter);
}
.search-result__link {
display: inline-flex;
align-items: center;
gap: var(--space-1);
font-weight: var(--weight-semibold);
color: var(--color-blue);
}
.no-results {
padding-block: var(--space-10);
}
.no-results svg {
margin: 0 auto var(--space-4);
color: var(--color-dark-lighter);
}
.no-results__search {
max-inline-size: 400px;
margin: var(--space-6) auto;
}
.no-results__suggestions {
margin-block-start: var(--space-6);
text-align: start;
max-inline-size: 400px;
margin-inline: auto;
}
.no-results__suggestions h3 {
font-size: var(--text-base);
margin-block-end: var(--space-3);
}
.no-results__suggestions li {
padding-block: var(--space-1);
padding-inline-start: var(--space-4);
position: relative;
font-size: var(--text-sm);
color: var(--color-dark-lighter);
}
.no-results__suggestions li::before {
content: '\2022';
position: absolute;
inset-inline-start: 0;
}
.error-404 {
text-align: center;
}
.error-404__code {
font-size: clamp(6rem, 15vw, 10rem);
font-weight: var(--weight-extrabold);
background: var(--gradient-hero);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1;
margin-block-end: var(--space-4);
}
.error-404__title {
font-size: var(--text-3xl);
margin-block-end: var(--space-4);
}
.error-404__text {
color: var(--color-dark-lighter);
font-size: var(--text-lg);
max-inline-size: 500px;
margin-inline: auto;
margin-block-end: var(--space-8);
line-height: var(--leading-relaxed);
}
.error-404__search {
max-inline-size: 400px;
margin: 0 auto var(--space-8);
}
.error-404__search .search-form {
margin-inline: auto;
}
.error-404__links {
margin-block-end: var(--space-8);
}
.error-404__links-title {
font-size: var(--text-base);
font-weight: var(--weight-semibold);
margin-block-end: var(--space-4);
}
.error-404__nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-2);
}
.error-404__link {
display: inline-block;
padding: var(--space-2) var(--space-4);
background-color: var(--color-light);
border-radius: var(--radius-md);
color: var(--color-dark);
font-weight: var(--weight-medium);
font-size: var(--text-sm);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
}
.error-404__link:hover {
background-color: var(--color-blue);
color: var(--color-white);
}
.faq-list {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.faq-item {
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--radius-md);
overflow: hidden;
}
.faq-item__question {
inline-size: 100%;
text-align: start;
padding: var(--space-4) var(--space-5);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
color: var(--color-dark);
background-color: var(--color-white);
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: background-color var(--transition-fast);
border: none;
font-family: var(--font-body);
}
.faq-item__question:hover {
background-color: var(--color-light);
}
.faq-item__question[aria-expanded="true"] {
background-color: var(--color-blue-50);
color: var(--color-blue);
}
.faq-item__icon {
font-size: var(--text-xl);
transition: transform var(--transition-base);
flex-shrink: 0;
margin-inline-start: var(--space-4);
}
.faq-item__question[aria-expanded="true"] .faq-item__icon {
transform: rotate(45deg);
}
.faq-item__answer {
padding: 0 var(--space-5) var(--space-5);
color: var(--color-dark-light);
line-height: var(--leading-relaxed);
}
.faq-item__answer[hidden] {
display: none;
}
.pagination {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2);
margin-block-start: var(--space-8);
}
.pagination .nav-links {
display: flex;
gap: var(--space-2);
}
.pagination .page-numbers {
display: flex;
align-items: center;
justify-content: center;
inline-size: 42px;
block-size: 42px;
border-radius: var(--radius-md);
font-weight: var(--weight-semibold);
color: var(--color-dark);
background-color: var(--color-light);
transition:
background-color var(--transition-fast),
color var(--transition-fast);
text-decoration: none;
}
.pagination .page-numbers:hover,
.pagination .page-numbers.current {
background-color: var(--color-blue);
color: var(--color-white);
}
.pagination .page-numbers.dots {
background-color: transparent;
}
@media (max-width: 1024px) {
.blog-layout { grid-template-columns: 1fr; }
.about-story { grid-template-columns: 1fr; }
.contact-page-layout { grid-template-columns: 1fr; }
.ai-service-detail { grid-template-columns: 1fr; }
.ai-service-detail--reverse { direction: ltr; }
.ai-service-detail__visual { display: none; }
.team-grid { grid-template-columns: repeat(2, 1fr); }
.ai-roi__grid { grid-template-columns: repeat(2, 1fr); }
.ai-process__steps { grid-template-columns: repeat(2, 1fr); }
.erp-modules-grid { grid-template-columns: repeat(2, 1fr); }
.erp-methodology { grid-template-columns: repeat(2, 1fr); }
.mvp-ideal-client { grid-template-columns: 1fr; }
.mission-vision { grid-template-columns: 1fr; }
.partners-grid { grid-template-columns: repeat(2, 1fr); }
.erp-clients { grid-template-columns: repeat(3, 1fr); }
.related-posts__grid { grid-template-columns: 1fr; }
.post-nav { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
.page-hero,
.page-hero--compact,
.ai-page-hero,
.mvp-page-hero,
.erp-page-hero { padding-block: calc(var(--header-height) + var(--space-10)) var(--space-10); }
.page-hero__title { font-size: var(--text-3xl); }
.ai-page-hero__title,
.mvp-page-hero__title { font-size: var(--text-3xl); }
.blog-grid { grid-template-columns: 1fr; }
.portfolio-grid { grid-template-columns: repeat(2, 1fr); }
.service-detail-card__features { grid-template-columns: 1fr; }
.mvp-pipeline__includes { grid-template-columns: 1fr; }
.form-row { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: repeat(2, 1fr); }
.single-hero { block-size: 300px; }
.single-hero__title { font-size: var(--text-2xl); }
.cta-section__title { font-size: var(--text-2xl); }
.error-404__code { font-size: 5rem; }
}
@media (max-width: 480px) {
.portfolio-grid { grid-template-columns: 1fr; }
.team-grid { grid-template-columns: 1fr; }
.ai-roi__grid { grid-template-columns: 1fr; }
.ai-process__steps { grid-template-columns: 1fr; }
.erp-modules-grid { grid-template-columns: 1fr; }
.erp-methodology { grid-template-columns: 1fr; }
.erp-clients { grid-template-columns: repeat(2, 1fr); }
.grid-4 { grid-template-columns: 1fr; }
.partners-grid { grid-template-columns: 1fr; }
}
.illustration {
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-xl);
}
.section-intro {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-8);
align-items: center;
}
.section-intro__media {
margin: 0;
max-inline-size: 420px;
margin-inline: auto;
inline-size: 100%;
}
.section-intro__text .section-subtitle {
margin-block-end: 0;
}
@media (min-width: 768px) {
.section-intro {
grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
gap: var(--space-12);
}
.section-intro__text .section-title,
.section-intro__text .section-subtitle {
text-align: start;
margin-inline: 0;
}
.section-intro__media {
margin-inline: 0;
justify-self: end;
}
}
.service-detail-card__media {
margin-block-end: var(--space-6);
}
@media (min-width: 768px) {
.service-detail-card {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
gap: var(--space-10);
align-items: center;
}
.service-detail-card__media {
margin-block-end: 0;
}
.service-detail-card__content {
min-inline-size: 0;
}
}
.service-detail-page__features {
max-inline-size: 900px;
margin-inline: auto;
gap: var(--space-3) var(--space-8);
}
.service-detail-page__features li {
font-size: var(--text-base);
}
.service-detail-page__number {
font-family: var(--font-display);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
}
.tech-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-3);
list-style: none;
padding: 0;
margin: var(--space-8) 0 0;
}
.tech-list .badge {
font-size: var(--text-sm);
padding: var(--space-2) var(--space-4);
}

/* ===== footer.css ===== */
.footer-cta {
background-color: var(--color-yellow);
padding-block: var(--space-12);
text-align: center;
}
.footer-cta__inner {
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.footer-cta__title {
font-family: var(--font-display);
font-size: var(--text-3xl);
color: var(--color-dark-darker);
margin-block-end: var(--space-3);
}
.footer-cta__text {
font-size: var(--text-lg);
color: var(--color-dark);
margin-block-end: var(--space-6);
max-inline-size: 550px;
margin-inline: auto;
}
.footer-cta__actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--space-4);
}
.site-footer {
background-color: var(--color-dark);
color: rgba(255, 255, 255, 0.7);
padding-block-start: var(--space-16);
}
.site-footer__inner {
max-inline-size: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-padding);
}
.site-footer__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-10);
padding-block-end: var(--space-12);
border-block-end: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-about__logo {
display: flex;
align-items: center;
margin-block-end: var(--space-4);
}
.footer-about__logo-img {
block-size: 36px;
inline-size: auto;
filter: brightness(0) invert(1);
}
.footer-about__logo-text {
font-family: var(--font-display);
font-size: var(--text-xl);
color: var(--color-white);
margin-inline-start: var(--space-2);
}
.footer-about__text {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: rgba(255, 255, 255, 0.6);
margin-block-end: var(--space-5);
}
.site-footer__heading {
font-family: var(--font-display);
font-size: var(--text-lg);
color: var(--color-white);
margin-block-end: var(--space-5);
}
.footer-links {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.footer-links__item {
font-size: var(--text-sm);
}
.footer-links__link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color var(--transition-fast);
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.footer-links__link:hover {
color: var(--color-yellow);
}
.footer-contact__item {
display: flex;
align-items: flex-start;
gap: var(--space-3);
margin-block-end: var(--space-4);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
}
.footer-contact__icon {
flex-shrink: 0;
inline-size: 18px;
block-size: 18px;
color: var(--color-blue-light);
margin-block-start: 2px;
}
.footer-contact__link {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color var(--transition-fast);
}
.footer-contact__link:hover {
color: var(--color-yellow);
}
.footer-social {
display: flex;
align-items: center;
gap: var(--space-3);
}
.footer-social__link {
display: flex;
align-items: center;
justify-content: center;
inline-size: 40px;
block-size: 40px;
border-radius: var(--radius-full);
background-color: rgba(255, 255, 255, 0.08);
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition:
background-color var(--transition-fast),
color var(--transition-fast),
transform var(--transition-fast);
}
.footer-social__link:hover {
background-color: var(--color-blue);
color: var(--color-white);
transform: translateY(-2px);
}
.footer-social__link svg {
inline-size: 18px;
block-size: 18px;
}
.site-footer__copyright {
padding-block: var(--space-6);
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-3);
text-align: center;
}
.site-footer__copyright-text {
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.4);
}
.site-footer__copyright-links {
display: flex;
align-items: center;
gap: var(--space-4);
}
.site-footer__copyright-link {
font-size: var(--text-xs);
color: rgba(255, 255, 255, 0.4);
text-decoration: none;
transition: color var(--transition-fast);
}
.site-footer__copyright-link:hover {
color: rgba(255, 255, 255, 0.8);
}
.site-footer__copyright-links span {
color: rgba(255, 255, 255, 0.2);
}
.footer-newsletter {
margin-block-start: var(--space-5);
}
.footer-newsletter__form {
display: flex;
gap: var(--space-2);
}
.footer-newsletter__input {
flex: 1;
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-md);
background-color: rgba(255, 255, 255, 0.05);
color: var(--color-white);
transition: border-color var(--transition-fast);
}
.footer-newsletter__input::placeholder {
color: rgba(255, 255, 255, 0.4);
}
.footer-newsletter__input:focus {
outline: none;
border-color: var(--color-blue);
}
.footer-newsletter__btn {
padding: var(--space-2) var(--space-4);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
background-color: var(--color-yellow);
color: var(--color-dark-darker);
border: none;
border-radius: var(--radius-md);
cursor: pointer;
transition:
background-color var(--transition-fast),
transform var(--transition-fast);
white-space: nowrap;
}
.footer-newsletter__btn:hover {
background-color: var(--color-yellow-dark);
transform: translateY(-1px);
}
.site-footer__logo {
display: flex;
align-items: center;
margin-block-end: var(--space-4);
}
.site-footer__logo img {
block-size: 36px;
inline-size: auto;
filter: brightness(0) invert(1);
}
.site-footer__about {
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
color: rgba(255, 255, 255, 0.6);
margin-block-end: var(--space-5);
}
.site-footer__links {
display: flex;
flex-direction: column;
gap: var(--space-3);
list-style: none;
padding: 0;
margin: 0;
}
.site-footer__links li {
font-size: var(--text-sm);
}
.site-footer__links a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color var(--transition-fast);
}
.site-footer__links a:hover {
color: var(--color-yellow);
}
.site-footer__contact {
display: flex;
flex-direction: column;
gap: var(--space-3);
font-size: var(--text-sm);
color: rgba(255, 255, 255, 0.6);
}
.site-footer__contact a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
transition: color var(--transition-fast);
}
.site-footer__contact a:hover {
color: var(--color-yellow);
}
.site-footer__bottom {
padding-block: var(--space-6);
border-block-start: 1px solid rgba(255, 255, 255, 0.1);
text-align: center;
}
.site-footer__bottom .site-footer__copyright {
border: none;
padding-block-start: 0;
}

/* ===== responsive.css ===== */
@media (min-width: 480px) {
.grid-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.hero__cta {
flex-direction: row;
justify-content: center;
}
.hero__trust-logos {
gap: var(--space-8);
}
.services__grid,
.services-grid__cards {
grid-template-columns: repeat(4, 1fr);
}
.services__card,
.services-grid__cards > .service-card {
grid-column-end: span 2;
}
.services-grid__cards > .service-card:last-child:nth-child(2n + 1) {
grid-column-start: 2;
}
.portfolio__grid {
grid-template-columns: repeat(2, 1fr);
}
.portfolio-carousel__grid {
grid-template-columns: repeat(2, 1fr);
}
.stats__grid {
grid-template-columns: repeat(2, 1fr);
}
.stats-counter__grid {
grid-template-columns: repeat(2, 1fr);
}
.testimonials__card {
flex: 0 0 85%;
}
.testimonial-slide {
min-width: 85%;
}
.ai-grid,
.ai-automations__grid {
grid-template-columns: repeat(2, 1fr);
}
.odoo-erp__modules {
grid-template-columns: repeat(2, 1fr);
}
.lead-bar__inner {
flex-direction: row;
justify-content: center;
}
.lead-magnet__form {
flex-direction: row;
}
.lead-magnet__form .btn-primary {
inline-size: auto;
flex-shrink: 0;
}
.contact-section__grid {
grid-template-columns: 1fr;
}
.site-footer__grid {
grid-template-columns: repeat(2, 1fr);
}
.site-footer__copyright {
flex-direction: row;
justify-content: space-between;
}
.exit-popup__form {
flex-direction: row;
}
.exit-popup__form .btn {
flex-shrink: 0;
}
}
@media (min-width: 768px) {
:root {
--container-padding: var(--space-6);
}
.grid-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-4 {
grid-template-columns: repeat(2, 1fr);
}
.header-cta {
display: inline-flex;
}
.hero__content {
padding-block: var(--space-20);
}
.hero__trust-stats {
gap: var(--space-12);
}
.services__grid,
.services-grid__cards {
grid-template-columns: repeat(6, 1fr);
}
.services-grid__cards > .service-card:last-child:nth-child(2n + 1) {
grid-column-start: auto;
}
.services-grid__cards > .service-card:nth-last-child(2):nth-child(3n + 1) {
grid-column-start: 2;
}
.services-grid__cards > .service-card:last-child:nth-child(3n + 1) {
grid-column-start: 3;
}
.odoo-erp__modules {
grid-template-columns: repeat(3, 1fr);
}
.process__timeline::before,
.process__timeline .process__timeline-line {
inset-inline-start: 50%;
inset-inline-end: auto;
transform: translateX(-50%);
}
.process__step,
.process-step {
inline-size: 50%;
padding-inline-start: var(--space-10);
}
.process__step:nth-child(odd),
.process-step--left {
margin-inline-start: 50%;
}
.process__step:nth-child(even),
.process-step--right {
margin-inline-end: 50%;
padding-inline-start: 0;
padding-inline-end: var(--space-10);
text-align: end;
}
.process__step-number,
.process-step__number {
inset-inline-start: calc(-21px);
}
.process__step:nth-child(even) .process__step-number,
.process-step--right .process-step__number {
inset-inline-start: auto;
inset-inline-end: calc(-21px);
}
.portfolio__grid {
grid-template-columns: repeat(3, 1fr);
}
.portfolio-carousel__grid {
grid-template-columns: repeat(3, 1fr);
}
.stats__grid {
grid-template-columns: repeat(4, 1fr);
}
.stats-counter__grid {
grid-template-columns: repeat(4, 1fr);
}
.testimonials__card {
flex: 0 0 60%;
}
.testimonial-slide {
min-width: 400px;
}
.contact__grid {
grid-template-columns: 1fr 1fr;
}
.contact-section__grid {
grid-template-columns: 3fr 2fr;
}
.lead-magnet__inner {
grid-template-columns: 1fr 1fr;
text-align: start;
}
.ai-grid,
.ai-automations__grid {
grid-template-columns: repeat(2, 1fr);
}
.startup-timeline,
.startup-mvp__pipeline {
max-inline-size: 700px;
}
.site-footer__grid {
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: var(--space-8);
}
.floating-btn {
inline-size: 60px;
block-size: 60px;
font-size: 1.75rem;
}
}
@media (min-width: 1024px) {
:root {
--container-padding: var(--space-8);
}
.grid-4 {
grid-template-columns: repeat(4, 1fr);
}
.site-nav {
display: flex;
}
.nav-menu li a {
padding: var(--space-2) var(--space-2);
font-size: var(--text-xs);
}
.hamburger {
display: none;
}
.mobile-nav {
display: none;
}
.mobile-nav-overlay {
display: none;
}
.hero__content {
max-inline-size: 900px;
padding-block: var(--space-24);
}
.hero__trust-logo {
block-size: 36px;
}
.section-padding {
padding-block: var(--space-20);
}
.section-padding-lg {
padding-block: var(--space-32);
}
.services__grid,
.services-grid__cards {
grid-template-columns: repeat(6, 1fr);
gap: var(--space-8);
}
.services__card,
.service-card {
padding: var(--space-10);
}
.cta-band {
padding-block: var(--space-16);
}
.cta-band__title {
font-size: var(--text-4xl);
}
.testimonials__card {
flex: 0 0 45%;
padding: var(--space-10);
}
.testimonial-slide {
min-width: 400px;
padding: var(--space-10);
}
.portfolio-carousel__grid {
grid-template-columns: repeat(3, 1fr);
}
.stats-counter__grid {
grid-template-columns: repeat(4, 1fr);
}
.faq__list,
.faq__accordion {
max-inline-size: 900px;
}
.ai-grid,
.ai-automations__grid {
grid-template-columns: repeat(4, 1fr);
}
.ai-section,
.ai-automations {
padding-block: var(--space-24);
}
.startup-timeline__phases,
.startup-mvp__pipeline {
flex-direction: row;
flex-wrap: nowrap;
gap: var(--space-6);
max-inline-size: 1100px;
}
.startup-timeline__line,
.startup-mvp__timeline-line {
inset-inline-start: 0;
inset-block-start: 28px;
inline-size: 100%;
block-size: 3px;
inset-block-end: auto;
}
.startup-timeline__line-fill,
.startup-mvp__timeline-line-progress {
block-size: 100%;
inline-size: 0;
transition: inline-size 1.5s var(--ease-out-expo);
}
.startup-timeline__line-fill.active,
.startup-mvp__timeline-line-progress.active {
inline-size: 100%;
block-size: 100%;
}
.startup-phase,
.mvp-phase {
flex: 1;
padding-inline-start: 0;
padding-block-start: calc(56px + var(--space-5));
}
.startup-phase__number,
.mvp-phase__badge {
inset-inline-start: 50%;
transform: translateX(-50%);
inset-block-start: 0;
}
.floating-actions {
inset-block-end: var(--space-8);
inset-inline-end: var(--space-8);
}
}
@media (min-width: 1280px) {
:root {
--container-padding: var(--space-10);
}
.site-nav__link {
padding: var(--space-2) var(--space-4);
font-size: var(--text-base);
}
.nav-menu li a {
padding: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.hero__content {
max-inline-size: 1000px;
}
.services__grid,
.services-grid__cards {
gap: var(--space-10);
}
.portfolio__grid {
grid-template-columns: repeat(4, 1fr);
}
.testimonials__card {
flex: 0 0 38%;
}
.contact__grid {
grid-template-columns: 1.2fr 0.8fr;
gap: var(--space-16);
}
.lead-magnet__inner {
max-inline-size: 1000px;
gap: var(--space-12);
}
.ai-grid,
.ai-automations__grid {
gap: var(--space-6);
}
.ai-card {
padding: var(--space-8);
}
.startup-timeline__phases,
.startup-mvp__pipeline {
gap: var(--space-8);
}
.startup-phase__card,
.mvp-phase {
padding: var(--space-8);
}
.site-footer__grid {
gap: var(--space-12);
}
}
@media (max-height: 700px) and (min-width: 768px) {
.hero {
min-block-size: auto;
padding-block: var(--space-16);
}
.hero__content {
padding-block: var(--space-10);
}
.hero__scroll {
display: none;
}
}
@media (hover: hover) and (pointer: fine) {
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-card-hover);
}
.btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-btn-hover);
}
.services__card:hover {
transform: translateY(-4px);
}
.portfolio__item:hover .portfolio__item-image {
transform: scale(1.05);
}
.portfolio__item:hover .portfolio__item-overlay {
opacity: 1;
}
.portfolio-item:hover .portfolio-item__overlay {
opacity: 1;
}
}
@media (hover: none) {
.card:hover,
.btn:hover,
.services__card:hover {
transform: none;
}
.floating-btn {
animation: none;
}
}
@media print {
.site-header,
.floating-actions,
.exit-popup,
.lead-bar,
.hero__particles,
.hero__blob,
.hero__scroll,
.ai-section__particles,
.ai-section__neural-bg,
.ai-automations__particles,
.ai-automations__neural-bg,
.startup-mvp__decorations {
display: none !important;
}
body {
color: #000;
background: #fff;
}
.hero {
min-block-size: auto;
padding-block: var(--space-8);
background: none;
color: #000;
}
.hero__title,
.hero__subtitle {
color: #000;
}
a {
color: #000;
text-decoration: underline;
}
.section-padding {
padding-block: var(--space-8);
}
}