@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-600-italic.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/cormorant-garamond-500-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/cormorant-garamond-600-normal.woff2') format('woff2');}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/cormorant-garamond-700-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/manrope-400-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/manrope-500-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/manrope-600-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/manrope-700-normal.woff2') format('woff2');}
@font-face{font-family:'Manrope';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/manrope-800-normal.woff2') format('woff2');}
:root {
--color-primary: #1747a6;
--color-primary-600: #123b8d;
--color-primary-700: #0e3075;
--color-primary-soft: #eaf0ff;
--color-navy: #081b3a;
--color-navy-800: #0d2448;
--color-navy-700: #14315d;
--color-navy-soft: #e9eef7;
--color-accent: #f5c518;
--color-accent-strong: #c89100;
--color-accent-500: #eab908;
--color-accent-soft: #fff7cc;
--color-white: #ffffff;
--color-warm-white: #fafaf8;
--color-surface: #ffffff;
--color-surface-soft: #f5f6f8;
--color-light-gray: #e6e8ec;
--color-gray-300: #cbd0d8;
--color-gray-500: #6b7280;
--color-gray-700: #374151;
--color-black: #1a1a1a;
--color-text: #172033;
--color-text-muted: #667085;
--color-text-soft: #98a2b3;
--color-heading: #081b3a;
--color-border: rgba(8, 27, 58, 0.12);
--color-border-strong: rgba(8, 27, 58, 0.2);
--color-overlay: rgba(4, 15, 34, 0.68);
--color-success: #1f8f5f;
--gradient-hero:
radial-gradient(circle at 75% 35%, rgba(23, 71, 166, 0.4), transparent 34%),
radial-gradient(circle at 88% 72%, rgba(245, 197, 24, 0.14), transparent 26%),
linear-gradient(135deg, #06152e 0%, #081b3a 46%, #0e2f68 100%);
--gradient-hero-light:
radial-gradient(circle at 78% 24%, rgba(23, 71, 166, 0.11), transparent 31%),
radial-gradient(circle at 91% 72%, rgba(245, 197, 24, 0.12), transparent 24%),
linear-gradient(180deg, #ffffff 0%, #fbfcff 54%, #f4f7fc 100%);
--gradient-primary:
linear-gradient(135deg, var(--color-primary) 0%, #245dca 100%);
--gradient-accent:
linear-gradient(135deg, #ffd52d 0%, var(--color-accent) 54%, #e3a900 100%);
--gradient-soft:
linear-gradient(180deg, var(--color-warm-white) 0%, #f2f5fa 100%);
--gradient-card:
linear-gradient(145deg,
rgba(255, 255, 255, 0.96) 0%,
rgba(250, 250, 248, 0.88) 100%);
--font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--font-body: "Manrope", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif;
--font-size-xs: 0.75rem;
--font-size-sm: 0.875rem;
--font-size-base: 1rem;
--font-size-md: 1.0625rem;
--font-size-lg: 1.125rem;
--font-size-xl: 1.25rem;
--font-size-2xl: 1.5rem;
--font-size-3xl: 2rem;
--font-size-4xl: 2.75rem;
--font-size-5xl: clamp(3.25rem, 6vw, 6.5rem);
--line-height-tight: 1.05;
--line-height-heading: 1.15;
--line-height-body: 1.75;
--letter-spacing-tight: -0.035em;
--letter-spacing-wide: 0.08em;
--letter-spacing-wider: 0.16em;
--container-width: 1200px;
--container-wide: 1360px;
--header-height: 84px;
--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-14: 3.5rem;
--space-16: 4rem;
--space-20: 5rem;
--space-24: 6rem;
--space-28: 7rem;
--space-32: 8rem;
--radius-xs: 0.5rem;
--radius-sm: 0.75rem;
--radius-md: 1.125rem;
--radius-lg: 1.5rem;
--radius-xl: 2rem;
--radius-2xl: 3rem;
--radius-pill: 999px;
--shadow-xs: 0 2px 8px rgba(8, 27, 58, 0.06);
--shadow-sm: 0 10px 30px rgba(8, 27, 58, 0.08);
--shadow-md: 0 20px 55px rgba(8, 27, 58, 0.12);
--shadow-lg: 0 32px 90px rgba(8, 27, 58, 0.18);
--shadow-accent: 0 18px 42px rgba(245, 197, 24, 0.24);
--shadow-primary: 0 18px 42px rgba(23, 71, 166, 0.24);
--shadow-hero-visual: 0 36px 90px rgba(8, 27, 58, 0.16);
--shadow-hero-card: 0 18px 46px rgba(8, 27, 58, 0.12);
--transition-fast: 160ms ease;
--transition-base: 260ms ease;
--transition-slow: 480ms cubic-bezier(0.22, 1, 0.36, 1);
--z-negative: -1;
--z-base: 1;
--z-content: 5;
--z-header: 100;
--z-overlay: 200;
--z-modal: 300;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
min-width: 320px;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-height) + var(--space-4));
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
min-width: 320px;
min-height: 100vh;
overflow-x: clip;
color: var(--color-text);
background: var(--color-white);
font-family: var(--font-body);
font-size: var(--font-size-base);
line-height: var(--line-height-body);
font-weight: 400;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body.nav-open {
overflow: hidden;
}
main {
display: block;
isolation: isolate;
}
section {
position: relative;
scroll-margin-top: calc(var(--header-height) + var(--space-4));
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
margin: 0;
}
ul,
ol {
margin: 0;
padding: 0;
list-style: none;
}
a {
color: inherit;
text-decoration: none;
}
button,
input,
textarea,
select {
margin: 0;
color: inherit;
font: inherit;
}
button {
padding: 0;
border: 0;
background: none;
cursor: pointer;
}
img,
picture,
svg,
video,
canvas {
display: block;
max-width: 100%;
}
img {
height: auto;
}
svg {
flex: 0 0 auto;
}
address {
font-style: normal;
}
::selection {
color: var(--color-navy);
background: var(--color-accent);
}
:focus-visible {
outline: 3px solid rgba(245, 197, 24, 0.72);
outline-offset: 4px;
}
.skip-link {
position: fixed;
top: var(--space-4);
left: var(--space-4);
z-index: var(--z-modal);
padding: 0.75rem 1rem;
border-radius: var(--radius-sm);
color: var(--color-navy);
background: var(--color-accent);
font-weight: 800;
transform: translateY(-160%);
transition: transform var(--transition-fast);
}
.skip-link:focus {
transform: translateY(0);
}
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
font-family: var(--font-display);
font-weight: 600;
line-height: var(--line-height-heading);
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--font-size-5xl);
line-height: var(--line-height-tight);
}
h2 {
font-size: clamp(2.5rem, 5vw, 4.75rem);
}
h3 {
font-size: clamp(1.65rem, 2.6vw, 2.35rem);
}
h4 {
font-size: clamp(1.25rem, 1.8vw, 1.55rem);
}
p {
color: var(--color-text-muted);
}
strong {
color: inherit;
font-weight: 800;
}
.text-accent {
color: var(--color-accent);
}
.text-primary {
color: var(--color-primary);
}
.text-white {
color: var(--color-white);
}
.container {
width: min(calc(100% - 48px), var(--container-width));
margin-inline: auto;
}
.container--wide {
width: min(calc(100% - 48px), var(--container-wide));
margin-inline: auto;
}
.section {
padding-block: var(--space-28);
}
.section--compact {
padding-block: var(--space-20);
}
.section--light {
color: var(--color-text);
background: var(--color-warm-white);
}
.section--white {
color: var(--color-text);
background: var(--color-white);
}
.section--dark {
color: rgba(255, 255, 255, 0.76);
background: var(--color-navy);
}
.section__header {
max-width: 760px;
margin-bottom: var(--space-14);
}
.section__header--center {
margin-inline: auto;
text-align: center;
}
.section__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
margin-bottom: var(--space-5);
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: 800;
line-height: 1;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.section__eyebrow::before {
width: 32px;
height: 2px;
border-radius: var(--radius-pill);
background: var(--color-accent);
content: "";
}
.section--dark .section__eyebrow {
color: var(--color-accent);
}
.section__title {
max-width: 18ch;
}
.section__title em {
color: var(--color-primary);
font-style: italic;
}
.section--dark .section__title {
color: var(--color-white);
}
.section--dark .section__title em {
color: var(--color-accent);
}
.section__description {
max-width: 640px;
margin-top: var(--space-5);
font-size: var(--font-size-lg);
}
.section--dark .section__description {
color: rgba(255, 255, 255, 0.68);
}
.grid {
display: grid;
gap: var(--space-6);
}
.grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.stack {
display: flex;
flex-direction: column;
}
.cluster {
display: flex;
align-items: center;
flex-wrap: wrap;
}
.btn {
position: relative;
display: inline-flex;
min-height: 52px;
align-items: center;
justify-content: center;
gap: var(--space-3);
padding: 0.9rem 1.35rem;
overflow: hidden;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: var(--font-size-sm);
font-weight: 800;
line-height: 1;
letter-spacing: 0.02em;
white-space: nowrap;
transition:
transform var(--transition-base),
color var(--transition-base),
background-color var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base);
}
.btn::before {
position: absolute;
inset: 0;
background: linear-gradient(110deg,
transparent 18%,
rgba(255, 255, 255, 0.28) 48%,
transparent 78%);
transform: translateX(-120%);
transition: transform 680ms ease;
content: "";
}
.btn:hover::before {
transform: translateX(120%);
}
.btn:hover {
transform: translateY(-3px);
}
.btn:active {
transform: translateY(-1px);
}
.btn__icon {
display: grid;
width: 30px;
height: 30px;
place-items: center;
border-radius: 50%;
transition: transform var(--transition-base);
}
.btn:hover .btn__icon {
transform: translateX(3px);
}
.btn--primary {
color: var(--color-white);
background: var(--gradient-primary);
box-shadow: var(--shadow-primary);
}
.btn--primary:hover {
box-shadow: 0 22px 54px rgba(23, 71, 166, 0.32);
}
.btn--accent {
color: var(--color-navy);
background: var(--gradient-accent);
box-shadow: var(--shadow-accent);
}
.btn--accent:hover {
box-shadow: 0 22px 54px rgba(245, 197, 24, 0.3);
}
.btn--outline {
color: var(--color-navy);
border-color: var(--color-border-strong);
background: rgba(255, 255, 255, 0.76);
backdrop-filter: blur(12px);
}
.btn--outline:hover {
border-color: var(--color-primary);
background: var(--color-white);
box-shadow: var(--shadow-sm);
}
.btn--outline-light {
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.24);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(12px);
}
.btn--outline-light:hover {
border-color: rgba(255, 255, 255, 0.48);
background: rgba(255, 255, 255, 0.14);
}
.btn--sm {
min-height: 44px;
padding-inline: 1.1rem;
}
.btn--lg {
min-height: 60px;
padding-inline: 1.75rem;
}
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-2);
min-height: 34px;
padding: 0.5rem 0.8rem;
border: 1px solid rgba(23, 71, 166, 0.14);
border-radius: var(--radius-pill);
color: var(--color-primary);
background: var(--color-primary-soft);
font-size: var(--font-size-xs);
font-weight: 800;
line-height: 1;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.badge--accent {
color: var(--color-navy);
border-color: rgba(245, 197, 24, 0.32);
background: var(--color-accent-soft);
}
.badge--glass {
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(14px);
}
.card {
position: relative;
overflow: hidden;
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
background: var(--gradient-card);
box-shadow: var(--shadow-xs);
transition:
transform var(--transition-slow),
border-color var(--transition-base),
box-shadow var(--transition-slow);
}
.card:hover {
border-color: rgba(23, 71, 166, 0.22);
box-shadow: var(--shadow-md);
transform: translateY(-8px);
}
.card__icon {
display: grid;
width: 54px;
height: 54px;
place-items: center;
border: 1px solid rgba(23, 71, 166, 0.12);
border-radius: var(--radius-md);
color: var(--color-primary);
background: var(--color-primary-soft);
}
.card__title {
margin-top: var(--space-6);
font-family: var(--font-body);
font-size: var(--font-size-xl);
font-weight: 800;
letter-spacing: -0.02em;
}
.card__description {
margin-top: var(--space-3);
font-size: var(--font-size-sm);
line-height: 1.75;
}
.glass-panel {
border: 1px solid rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.16);
backdrop-filter: blur(18px);
}
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: var(--z-header);
width: 100%;
height: var(--header-height);
color: var(--color-white);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(6, 21, 46, 0.94);
box-shadow: 0 10px 34px rgba(8, 27, 58, 0.12);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transition:
height var(--transition-base),
color var(--transition-base),
background-color var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base),
backdrop-filter var(--transition-base);
}
.site-header.is-scrolled {
height: 72px;
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.08);
background: rgba(6, 21, 46, 0.96);
box-shadow: 0 12px 36px rgba(8, 27, 58, 0.16);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.site-header__inner {
display: flex;
width: min(calc(100% - 48px), var(--container-wide));
height: 100%;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
margin-inline: auto;
}
.site-brand {
display: inline-flex;
min-width: max-content;
align-items: center;
gap: var(--space-3);
}
.site-brand__logo {
width: auto;
height: 48px;
object-fit: contain;
transition: height var(--transition-base);
}
.site-header.is-scrolled .site-brand__logo {
height: 42px;
filter: none;
}
.site-brand__name {
display: flex;
flex-direction: column;
line-height: 1;
}
.site-brand__title {
color: inherit;
font-family: var(--font-display);
font-size: 1.28rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.site-brand__subtitle {
margin-top: 0.35rem;
color: var(--color-accent);
font-size: 0.58rem;
font-weight: 800;
letter-spacing: 0.32em;
text-transform: uppercase;
}
.site-nav {
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-nav__list {
display: flex;
align-items: center;
gap: var(--space-8);
}
.site-nav__link {
position: relative;
padding-block: var(--space-2);
color: inherit;
font-size: var(--font-size-sm);
font-weight: 700;
opacity: 0.82;
transition:
color var(--transition-fast),
opacity var(--transition-fast);
}
.site-nav__link::after {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 2px;
border-radius: var(--radius-pill);
background: var(--color-accent);
box-shadow: 0 2px 10px rgba(245, 197, 24, 0.26);
transform: scaleX(0);
transform-origin: right;
transition: transform var(--transition-base);
content: "";
}
.site-nav__link:hover,
.site-nav__link.is-active {
opacity: 1;
}
.site-nav__link:hover::after,
.site-nav__link.is-active::after {
transform: scaleX(1);
transform-origin: left;
}
.site-header__actions {
display: flex;
align-items: center;
gap: var(--space-3);
}
.nav-toggle {
display: none;
width: 46px;
height: 46px;
place-items: center;
border: 1px solid currentColor;
border-radius: 50%;
color: inherit;
}
.nav-toggle__line {
position: relative;
width: 20px;
height: 2px;
border-radius: var(--radius-pill);
background: currentColor;
transition: background-color var(--transition-fast);
}
.nav-toggle__line::before,
.nav-toggle__line::after {
position: absolute;
left: 0;
width: 20px;
height: 2px;
border-radius: inherit;
background: currentColor;
transition:
top var(--transition-base),
transform var(--transition-base);
content: "";
}
.nav-toggle__line::before {
top: -6px;
}
.nav-toggle__line::after {
top: 6px;
}
.hero {
position: relative;
display: grid;
min-height: 100svh;
align-items: center;
overflow: clip;
color: var(--color-heading);
border-bottom: 1px solid rgba(8, 27, 58, 0.08);
background: var(--gradient-hero-light);
}
.hero::before {
position: absolute;
inset: 0;
z-index: var(--z-negative);
background:
linear-gradient(rgba(8, 27, 58, 0.032) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 27, 58, 0.032) 1px, transparent 1px);
background-size: 72px 72px;
mask-image: linear-gradient(to bottom, black, transparent 88%);
-webkit-mask-image: linear-gradient(to bottom, black, transparent 88%);
content: "";
}
.hero::after {
position: absolute;
right: -12vw;
bottom: -28vw;
z-index: var(--z-negative);
width: min(62vw, 860px);
aspect-ratio: 1;
border: 1px solid rgba(23, 71, 166, 0.08);
border-radius: 50%;
box-shadow:
0 0 0 70px rgba(23, 71, 166, 0.025),
0 0 0 140px rgba(23, 71, 166, 0.018);
content: "";
}
.hero__container {
display: grid;
grid-template-columns: minmax(0, 1.02fr) minmax(420px, 0.98fr);
align-items: center;
gap: clamp(3rem, 7vw, 7rem);
width: min(calc(100% - 48px), var(--container-wide));
margin-inline: auto;
padding-top: calc(var(--header-height) + var(--space-16));
padding-bottom: var(--space-20);
}
.hero__content {
position: relative;
z-index: var(--z-content);
max-width: 720px;
}
.hero__badge {
margin-bottom: var(--space-6);
}
.hero__title {
max-width: 10.5ch;
color: var(--color-navy);
text-wrap: balance;
}
.hero__title em {
color: var(--color-accent-strong);
font-style: italic;
text-shadow: 0 10px 26px rgba(245, 197, 24, 0.16);
}
.hero__description {
max-width: 610px;
margin-top: var(--space-6);
color: var(--color-text-muted);
font-size: clamp(1rem, 1.35vw, 1.2rem);
line-height: 1.85;
}
.hero__actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-8);
}
.hero__trust {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-5);
margin-top: var(--space-10);
color: var(--color-gray-700);
font-size: var(--font-size-sm);
}
.hero__trust-item {
display: inline-flex;
align-items: center;
gap: var(--space-2);
}
.hero__trust-item svg {
color: var(--color-primary);
}
.hero__visual {
position: relative;
min-height: 620px;
}
.hero__visual-frame {
position: absolute;
inset: 5% 0 0 9%;
overflow: hidden;
border: 1px solid rgba(8, 27, 58, 0.1);
border-radius: 42% 42% var(--radius-2xl) var(--radius-2xl);
background:
radial-gradient(circle at 50% 28%, rgba(255, 255, 255, 0.46), transparent 36%),
linear-gradient(160deg, rgba(23, 71, 166, 0.08), rgba(255, 255, 255, 0.22));
box-shadow: var(--shadow-hero-visual);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__product {
position: absolute;
right: 8%;
bottom: 3%;
z-index: 3;
width: min(65%, 430px);
filter:
drop-shadow(0 34px 42px rgba(8, 27, 58, 0.24))
drop-shadow(0 10px 24px rgba(23, 71, 166, 0.08));
}
.hero__orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
filter: blur(1px);
}
.hero__orb--blue {
top: 8%;
right: -5%;
width: 190px;
height: 190px;
background: rgba(47, 106, 221, 0.11);
box-shadow: 0 0 100px rgba(47, 106, 221, 0.2);
}
.hero__orb--gold {
right: 24%;
bottom: 8%;
width: 110px;
height: 110px;
background: rgba(245, 197, 24, 0.15);
box-shadow: 0 0 90px rgba(245, 197, 24, 0.22);
}
.hero__floating-card {
position: absolute;
z-index: 4;
max-width: 220px;
padding: var(--space-5);
border-radius: var(--radius-lg);
}
.hero__floating-card--top {
top: 12%;
left: 0;
}
.hero__floating-card--bottom {
right: -2%;
bottom: 14%;
}
.hero__floating-label {
color: var(--color-text-muted);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
.hero__floating-value {
margin-top: var(--space-2);
color: var(--color-navy);
font-size: 1rem;
font-weight: 800;
}
.hero__scroll {
position: absolute;
bottom: var(--space-8);
left: 50%;
z-index: var(--z-content);
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: rgba(8, 27, 58, 0.52);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
transform: translateX(-50%);
}
.hero__scroll-line {
width: 42px;
height: 1px;
background: linear-gradient(to right, var(--color-primary), transparent);
}
.hero .badge--glass {
color: var(--color-primary);
border-color: rgba(23, 71, 166, 0.14);
background: rgba(255, 255, 255, 0.86);
box-shadow: 0 10px 30px rgba(8, 27, 58, 0.06);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
}
.hero .btn--outline-light {
color: var(--color-navy);
border-color: rgba(8, 27, 58, 0.18);
background: rgba(255, 255, 255, 0.8);
box-shadow: 0 10px 28px rgba(8, 27, 58, 0.05);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.hero .btn--outline-light:hover {
color: var(--color-primary);
border-color: rgba(23, 71, 166, 0.38);
background: var(--color-white);
box-shadow: 0 16px 34px rgba(23, 71, 166, 0.12);
}
.hero .glass-panel {
border-color: rgba(8, 27, 58, 0.1);
background: rgba(255, 255, 255, 0.9);
box-shadow: var(--shadow-hero-card);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
}
.services {
overflow: hidden;
background:
linear-gradient(180deg, #f8faff 0%, var(--color-warm-white) 100%);
}
.services::before {
position: absolute;
top: 8%;
left: -10%;
width: 360px;
height: 360px;
border-radius: 50%;
background: rgba(23, 71, 166, 0.06);
filter: blur(10px);
content: "";
}
.services__grid {
position: relative;
z-index: var(--z-base);
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.service-card {
min-height: 310px;
padding: var(--space-8);
}
.service-card::before {
position: absolute;
top: 0;
right: 0;
width: 160px;
height: 160px;
border-radius: 0 0 0 100%;
background: linear-gradient(145deg,
rgba(23, 71, 166, 0.07),
transparent 72%);
content: "";
}
.service-card__number {
position: absolute;
top: var(--space-6);
right: var(--space-6);
color: rgba(8, 27, 58, 0.12);
font-family: var(--font-display);
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
.service-card__link {
display: inline-flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-6);
color: var(--color-primary);
font-size: var(--font-size-sm);
font-weight: 800;
}
.service-card__link svg {
transition: transform var(--transition-base);
}
.service-card:hover .service-card__link svg {
transform: translateX(4px);
}
.advantages {
overflow: hidden;
background: var(--color-white);
}
.advantages__layout {
display: grid;
grid-template-columns: minmax(340px, 0.9fr) minmax(0, 1.1fr);
align-items: center;
gap: clamp(4rem, 8vw, 8rem);
}
.advantages__visual {
position: relative;
min-height: 650px;
}
.advantages__image-shell {
position: absolute;
inset: 0 12% 8% 0;
overflow: hidden;
border-radius: var(--radius-2xl);
background: var(--color-navy);
box-shadow: var(--shadow-lg);
}
.advantages__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.advantages__image-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(8, 27, 58, 0.62), transparent 58%),
linear-gradient(135deg, rgba(23, 71, 166, 0.2), transparent);
}
.advantages__stat {
position: absolute;
right: 0;
bottom: 0;
width: min(60%, 300px);
padding: var(--space-8);
border-radius: var(--radius-xl);
color: var(--color-white);
background: var(--gradient-primary);
box-shadow: var(--shadow-primary);
}
.advantages__stat-value {
display: block;
color: var(--color-accent);
font-family: var(--font-display);
font-size: 4rem;
font-weight: 700;
line-height: 0.9;
}
.advantages__stat-label {
display: block;
margin-top: var(--space-3);
color: rgba(255, 255, 255, 0.78);
font-size: var(--font-size-sm);
font-weight: 700;
}
.advantages__content .section__description {
margin-bottom: var(--space-8);
}
.advantages__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.advantage-item {
display: flex;
gap: var(--space-4);
padding: var(--space-5);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-warm-white);
transition:
transform var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base);
}
.advantage-item:hover {
border-color: rgba(23, 71, 166, 0.24);
box-shadow: var(--shadow-sm);
transform: translateY(-4px);
}
.advantage-item__icon {
display: grid;
width: 42px;
height: 42px;
flex: 0 0 42px;
place-items: center;
border-radius: 50%;
color: var(--color-navy);
background: var(--color-accent);
}
.advantage-item__title {
font-family: var(--font-body);
font-size: var(--font-size-base);
font-weight: 800;
letter-spacing: -0.02em;
}
.advantage-item__text {
margin-top: var(--space-1);
font-size: var(--font-size-sm);
line-height: 1.65;
}
.portfolio {
overflow: hidden;
color: var(--color-white);
border-top: 1px solid rgba(255, 255, 255, 0.06);
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
background:
linear-gradient(135deg, #06152e 0%, var(--color-navy) 58%, #0d2a58 100%);
}
.portfolio::before {
position: absolute;
inset: 0;
background:
radial-gradient(circle at 15% 20%, rgba(23, 71, 166, 0.3), transparent 30%),
radial-gradient(circle at 92% 80%, rgba(245, 197, 24, 0.1), transparent 24%);
pointer-events: none;
content: "";
}
.portfolio__header {
position: relative;
z-index: var(--z-base);
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--space-8);
margin-bottom: var(--space-14);
}
.portfolio__header .section__header {
margin-bottom: 0;
}
.portfolio__controls {
display: flex;
gap: var(--space-3);
}
.portfolio__control {
display: grid;
width: 50px;
height: 50px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 50%;
color: var(--color-white);
background: rgba(255, 255, 255, 0.06);
transition:
color var(--transition-base),
background-color var(--transition-base),
border-color var(--transition-base),
transform var(--transition-base);
}
.portfolio__control:hover {
color: var(--color-navy);
border-color: var(--color-accent);
background: var(--color-accent);
transform: translateY(-3px);
}
.portfolio__grid {
position: relative;
z-index: var(--z-base);
display: grid;
grid-template-columns: 1.12fr 0.88fr 0.88fr;
grid-auto-rows: 280px;
gap: var(--space-5);
}
.portfolio-card {
position: relative;
overflow: hidden;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: var(--radius-xl);
background: var(--color-navy-800);
}
.portfolio-card--featured {
grid-row: span 2;
}
.portfolio-card__image {
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 900ms cubic-bezier(0.22, 1, 0.36, 1),
filter var(--transition-slow);
}
.portfolio-card::after {
position: absolute;
inset: 0;
background:
linear-gradient(to top, rgba(2, 10, 24, 0.88), transparent 60%),
linear-gradient(135deg, rgba(23, 71, 166, 0.12), transparent);
content: "";
}
.portfolio-card:hover .portfolio-card__image {
transform: scale(1.06);
}
.portfolio-card__content {
position: absolute;
right: var(--space-6);
bottom: var(--space-6);
left: var(--space-6);
z-index: 2;
}
.portfolio-card__category {
color: var(--color-accent);
font-size: var(--font-size-xs);
font-weight: 800;
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
.portfolio-card__title {
margin-top: var(--space-2);
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--font-size-xl);
font-weight: 800;
letter-spacing: -0.02em;
}
.contact-cta {
overflow: hidden;
background: var(--color-warm-white);
}
.contact-cta__shell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr);
align-items: center;
gap: var(--space-12);
overflow: hidden;
padding: clamp(3rem, 7vw, 6rem);
border-radius: var(--radius-2xl);
color: var(--color-white);
background: var(--gradient-hero);
box-shadow: var(--shadow-lg);
}
.contact-cta__shell::before {
position: absolute;
top: -50%;
right: -12%;
width: 520px;
height: 520px;
border: 1px solid rgba(245, 197, 24, 0.15);
border-radius: 50%;
box-shadow:
0 0 0 70px rgba(255, 255, 255, 0.025),
0 0 0 140px rgba(255, 255, 255, 0.018);
content: "";
}
.contact-cta__content {
position: relative;
z-index: var(--z-base);
}
.contact-cta__eyebrow {
color: var(--color-accent);
}
.contact-cta__title {
max-width: 12ch;
color: var(--color-white);
}
.contact-cta__description {
max-width: 580px;
margin-top: var(--space-5);
color: rgba(255, 255, 255, 0.7);
font-size: var(--font-size-lg);
}
.contact-cta__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-4);
margin-top: var(--space-8);
}
.contact-cta__info {
position: relative;
z-index: var(--z-base);
display: grid;
gap: var(--space-3);
}
.contact-card {
display: flex;
align-items: flex-start;
gap: var(--space-4);
padding: var(--space-5);
border-radius: var(--radius-lg);
}
.contact-card__icon {
display: grid;
width: 44px;
height: 44px;
flex: 0 0 44px;
place-items: center;
border-radius: 50%;
color: var(--color-navy);
background: var(--color-accent);
}
.contact-card__label {
display: block;
color: rgba(255, 255, 255, 0.52);
font-size: var(--font-size-xs);
font-weight: 800;
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
.contact-card__value {
display: inline-block;
margin-top: var(--space-1);
color: var(--color-white);
font-size: var(--font-size-sm);
font-weight: 700;
line-height: 1.6;
}
.site-footer {
color: rgba(255, 255, 255, 0.68);
background: #041126;
}
.site-footer__main {
display: grid;
grid-template-columns: minmax(260px, 1.25fr) repeat(3, minmax(160px, 0.75fr));
gap: clamp(2rem, 5vw, 5rem);
padding-block: var(--space-20);
}
.site-footer__brand {
max-width: 380px;
}
.site-footer__brand .site-brand {
color: var(--color-white);
}
.site-footer__description {
margin-top: var(--space-6);
color: rgba(255, 255, 255, 0.56);
font-size: var(--font-size-sm);
}
.site-footer__socials {
display: flex;
gap: var(--space-3);
margin-top: var(--space-6);
}
.site-footer__social {
display: grid;
width: 44px;
height: 44px;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 50%;
color: var(--color-white);
background: rgba(255, 255, 255, 0.04);
transition:
color var(--transition-base),
border-color var(--transition-base),
background-color var(--transition-base),
transform var(--transition-base);
}
.site-footer__social:hover {
color: var(--color-navy);
border-color: var(--color-accent);
background: var(--color-accent);
transform: translateY(-3px);
}
.site-footer__title {
color: var(--color-white);
font-family: var(--font-body);
font-size: var(--font-size-sm);
font-weight: 800;
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
.site-footer__list {
display: grid;
gap: var(--space-3);
margin-top: var(--space-6);
}
.site-footer__link {
color: rgba(255, 255, 255, 0.58);
font-size: var(--font-size-sm);
transition:
color var(--transition-fast),
transform var(--transition-fast);
}
.site-footer__link:hover {
color: var(--color-accent);
transform: translateX(3px);
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
padding-block: var(--space-6);
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: var(--font-size-xs);
}
.site-footer__legal {
display: flex;
align-items: center;
gap: var(--space-5);
}
.whatsapp-float {
position: fixed;
right: var(--space-6);
bottom: var(--space-6);
z-index: 90;
display: inline-flex;
min-height: 58px;
align-items: center;
gap: var(--space-3);
padding: 0.65rem 0.8rem 0.65rem 0.7rem;
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: var(--radius-pill);
color: var(--color-white);
background: #1f9d5a;
box-shadow: 0 16px 40px rgba(19, 125, 70, 0.28);
transition:
transform var(--transition-base),
box-shadow var(--transition-base);
}
.whatsapp-float:hover {
box-shadow: 0 22px 54px rgba(19, 125, 70, 0.34);
transform: translateY(-4px);
}
.whatsapp-float__icon {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 50%;
color: #1f9d5a;
background: var(--color-white);
}
.whatsapp-float__text {
display: flex;
flex-direction: column;
padding-right: var(--space-3);
line-height: 1.2;
}
.whatsapp-float__label {
font-size: 0.67rem;
font-weight: 700;
opacity: 0.78;
}
.whatsapp-float__value {
margin-top: 0.15rem;
font-size: var(--font-size-sm);
font-weight: 800;
}
[data-parallax] {
--parallax-x: 0px;
--parallax-y: 0px;
transform: translate3d(var(--parallax-x), var(--parallax-y), 0);
}
[data-reveal] {
backface-visibility: hidden;
}
.parallax-layer {
position: absolute;
pointer-events: none;
}
.parallax-layer--behind {
z-index: var(--z-negative);
}
.parallax-layer--front {
z-index: var(--z-content);
}
.u-relative {
position: relative;
}
.u-overflow-hidden {
overflow: hidden;
}
.u-text-center {
text-align: center;
}
.u-text-left {
text-align: left;
}
.u-inline-flex {
display: inline-flex;
}
.u-hidden {
display: none !important;
}
.u-full-width {
width: 100%;
}
.u-no-wrap {
white-space: nowrap;
}
.u-divider {
width: 100%;
height: 1px;
background: var(--color-border);
}
.u-surface-grid {
background-image:
linear-gradient(rgba(8, 27, 58, 0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(8, 27, 58, 0.035) 1px, transparent 1px);
background-size: 48px 48px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
[data-parallax] {
transform: none !important;
}
}
.partners {
position: relative;
overflow: hidden;
padding-block: var(--space-20);
border-bottom: 1px solid var(--color-border);
background:
radial-gradient(circle at 12% 18%, rgba(23, 71, 166, 0.055), transparent 28%),
linear-gradient(180deg, var(--color-white) 0%, #fbfcff 100%);
}
.partners__header {
max-width: 760px;
margin: 0 auto var(--space-10);
text-align: center;
}
.partners__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-3);
color: var(--color-primary);
font-size: var(--font-size-xs);
font-weight: 800;
line-height: 1;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.partners__eyebrow::before,
.partners__eyebrow::after {
width: 28px;
height: 2px;
border-radius: var(--radius-pill);
background: var(--color-accent);
content: "";
}
.partners__title {
max-width: 18ch;
margin: var(--space-5) auto 0;
font-size: clamp(2.25rem, 4.5vw, 4rem);
text-wrap: balance;
}
.partners__title em {
color: var(--color-primary);
font-style: italic;
}
.partners__description {
max-width: 650px;
margin: var(--space-4) auto 0;
color: var(--color-text-muted);
font-size: var(--font-size-md);
line-height: 1.8;
}
.partners__marquee {
position: relative;
width: 100%;
overflow: hidden;
}
.partners__marquee::before,
.partners__marquee::after {
right: 0;
background: linear-gradient(
to left,
#fbfcff 0%,
rgba(251, 252, 255, 0.92) 35%,
transparent 100%
);
}
.partners__marquee::before {
left: 0;
background: linear-gradient(
to right,
#fbfcff 0%,
rgba(251, 252, 255, 0.92) 35%,
transparent 100%
);
}
.partners__marquee::after {
right: 0;
background: linear-gradient(to left,
var(--color-warm-white) 0%,
rgba(250, 250, 248, 0.9) 35%,
transparent 100%);
}
.partners__track {
display: flex;
width: max-content;
will-change: transform;
}
.partners__group {
display: flex;
flex: none;
align-items: center;
gap: var(--space-5);
padding-right: var(--space-5);
}
.partner-logo {
position: relative;
display: flex;
width: clamp(180px, 16vw, 225px);
height: 126px;
flex: 0 0 auto;
align-items: center;
justify-content: center;
padding: 1rem 1.25rem;
overflow: hidden;
border: 1px solid rgba(8, 27, 58, 0.09);
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.96);
box-shadow: 0 12px 34px rgba(8, 27, 58, 0.06);
transition:
transform var(--transition-base),
border-color var(--transition-base),
box-shadow var(--transition-base),
background-color var(--transition-base);
}
.partner-logo::before {
position: absolute;
inset: 0;
border-radius: inherit;
background:
radial-gradient(circle at 50% 0%,
rgba(23, 71, 166, 0.08),
transparent 55%);
opacity: 0;
transition: opacity var(--transition-base);
content: "";
}
.partner-logo:hover {
z-index: 2;
border-color: rgba(23, 71, 166, 0.24);
background: var(--color-white);
box-shadow: var(--shadow-md);
transform: translateY(-6px);
}
.partner-logo:hover::before {
opacity: 1;
}
.partner-logo__image {
position: relative;
z-index: 1;
width: auto;
height: auto;
max-width: 82%;
max-height: 72%;
object-fit: contain;
object-position: center;
filter:
saturate(0.9) contrast(1.02);
transition:
transform var(--transition-base),
filter var(--transition-base),
opacity var(--transition-base);
}
.partner-logo:hover .partner-logo__image {
filter:
saturate(1) contrast(1);
transform: scale(1.035);
}
.partner-logo--wide .partner-logo__image {
max-width: 92%;
max-height: 58%;
}
.partner-logo--square .partner-logo__image {
max-width: 84%;
max-height: 84%;
border-radius: 0.65rem;
}
.partner-logo--compact .partner-logo__image {
max-width: 64%;
max-height: 64%;
}
.partners__note {
width: min(calc(100% - 48px), var(--container-width));
margin: var(--space-8) auto 0;
color: var(--color-text-soft);
font-size: var(--font-size-xs);
line-height: 1.7;
text-align: center;
}
.partners__marquee.is-paused .partners__track {
animation-play-state: paused;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
.site-header,
.site-header.is-scrolled {
background: rgba(6, 21, 46, 0.98);
}
.hero .badge--glass,
.hero .btn--outline-light,
.hero .glass-panel {
background: rgba(255, 255, 255, 0.96);
}
}
:root { --ease-luxury:cubic-bezier(.22,1,.36,1); --ease-soft:cubic-bezier(.33,1,.68,1); }
.page-loader { display:none; }
.hero__badge,.hero__title,.hero__description,.hero__actions,.hero__trust,.hero__visual,
[data-reveal],[data-stagger] > *, .partner-logo { opacity:1; }
[data-reveal] { transition:opacity .35s ease,translate .35s ease; }
.reveal-pending { opacity:0; translate:0 14px; }
[data-parallax] { transition:transform .18s ease-out; }
[data-parallax="slow"] { transform:translate3d(calc(var(--parallax-x,0px)*.28),calc(var(--parallax-y,0px)*.28),0); }
[data-parallax="medium"] { transform:translate3d(calc(var(--parallax-x,0px)*.52),calc(var(--parallax-y,0px)*.52),0); }
[data-parallax="fast"] { transform:translate3d(calc(var(--parallax-x,0px)*.78),calc(var(--parallax-y,0px)*.78),0); }
[data-parallax="reverse"] { transform:translate3d(calc(var(--parallax-x,0px)*-.42),calc(var(--parallax-y,0px)*-.42),0); }
.partners__marquee { overflow-x:auto; scrollbar-width:thin; }
.partners__track { will-change:auto; }
.partners__marquee.is-ready { overflow:hidden; }
.partners__marquee.is-ready .partners__track { animation:partnersMarquee var(--partners-marquee-duration,60s) linear infinite; }
.partners__marquee:hover .partners__track,.partners__marquee:focus-within .partners__track,.partners__marquee.is-paused .partners__track { animation-play-state:paused; }
@keyframes partnersMarquee { to { transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce) {
html { scroll-behavior:auto; }
*,*::before,*::after { animation:none !important; transition:none !important; }
[data-reveal] { opacity:1 !important; translate:none; }
[data-parallax] { transform:none !important; }
.partners__marquee { overflow-x:auto !important; }
.partners__track { transform:none !important; }
[data-marquee-clone] { display:none; }
}
@media (min-width: 1441px) {
:root {
--container-width: 1240px;
--container-wide: 1420px;
}
.hero__container {
min-height: 100svh;
}
.hero__visual {
min-height: 680px;
}
.portfolio__grid {
grid-auto-rows: 310px;
}
}
@media (max-width: 1280px) {
:root {
--container-width: 1120px;
--container-wide: 1220px;
--space-28: 6.25rem;
--space-32: 7rem;
}
.site-header__inner,
.hero__container {
width: min(calc(100% - 40px), var(--container-wide));
}
.container,
.container--wide {
width: min(calc(100% - 40px), var(--container-width));
}
.hero__container {
grid-template-columns: minmax(0, 1fr) minmax(390px, 0.9fr);
gap: clamp(2.5rem, 5vw, 5rem);
}
.hero__visual {
min-height: 580px;
}
.services__grid {
gap: var(--space-5);
}
.service-card {
min-height: 290px;
padding: var(--space-6);
}
.advantages__layout {
gap: clamp(3.5rem, 6vw, 6rem);
}
.portfolio__grid {
grid-auto-rows: 260px;
}
.contact-cta__shell {
padding: clamp(2.75rem, 5.5vw, 5rem);
}
}
@media (max-width: 1100px) {
:root {
--header-height: 78px;
--space-24: 5rem;
--space-28: 5.5rem;
}
.site-nav {
gap: var(--space-5);
}
.site-nav__list {
gap: var(--space-5);
}
.site-header__actions .btn {
padding-inline: 1.1rem;
}
.hero__container {
grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
gap: 3rem;
}
.hero__visual {
min-height: 540px;
}
.hero__floating-card {
max-width: 190px;
padding: var(--space-4);
}
.hero__floating-card--top {
left: -2%;
}
.hero__floating-card--bottom {
right: -1%;
}
.services__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.advantages__layout {
grid-template-columns: minmax(320px, 0.9fr) minmax(0, 1.1fr);
gap: 3.75rem;
}
.advantages__visual {
min-height: 570px;
}
.portfolio__grid {
grid-template-columns: 1.1fr 0.9fr;
}
.portfolio-card:nth-child(4) {
grid-column: 1 / -1;
}
.contact-cta__shell {
grid-template-columns: minmax(0, 1fr) minmax(300px, 0.78fr);
gap: var(--space-8);
}
.site-footer__main {
grid-template-columns: 1.3fr repeat(2, minmax(160px, 0.7fr));
}
.site-footer__column:last-child {
grid-column: 2 / -1;
}
}
@media (max-width: 900px) {
:root {
--header-height: 74px;
--space-20: 4.5rem;
--space-24: 4.75rem;
--space-28: 5rem;
}
html {
scroll-padding-top: calc(var(--header-height) + var(--space-3));
}
.container,
.container--wide,
.site-header__inner,
.hero__container {
width: min(calc(100% - 36px), var(--container-width));
}
.site-header,
.site-header.is-scrolled {
height: var(--header-height);
}
.site-brand__logo,
.site-header.is-scrolled .site-brand__logo {
height: 42px;
}
.site-nav {
position: fixed;
inset: var(--header-height) 0 auto;
display: block;
max-height: calc(100svh - var(--header-height));
padding: var(--space-5) 18px var(--space-8);
overflow-y: auto;
color: var(--color-heading);
border-top: 1px solid var(--color-border);
background: rgba(250, 250, 248, 0.98);
box-shadow: 0 24px 60px rgba(8, 27, 58, 0.14);
backdrop-filter: blur(20px);
opacity: 0;
visibility: hidden;
transform: translateY(-18px);
transition:
opacity var(--transition-base),
visibility var(--transition-base),
transform var(--transition-base);
}
.site-header.nav-open .site-nav {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-nav__list {
display: grid;
gap: 0;
}
.site-nav__item {
border-bottom: 1px solid var(--color-border);
}
.site-nav__link {
display: flex;
min-height: 58px;
align-items: center;
justify-content: space-between;
padding: 0;
font-size: var(--font-size-base);
opacity: 1;
}
.site-nav__link::after {
display: none;
}
.site-nav__link::before {
order: 2;
color: var(--color-primary);
font-size: 1.1rem;
content: "↗";
}
.site-nav .btn {
width: 100%;
margin-top: var(--space-5);
}
.site-header__actions>.btn {
display: none;
}
.nav-toggle {
display: grid;
}
.site-header.nav-open .nav-toggle__line {
background: transparent;
}
.site-header.nav-open .nav-toggle__line::before {
top: 0;
transform: rotate(45deg);
}
.site-header.nav-open .nav-toggle__line::after {
top: 0;
transform: rotate(-45deg);
}
.hero {
min-height: auto;
}
.hero__container {
grid-template-columns: 1fr;
gap: var(--space-10);
min-height: 100svh;
padding-top: calc(var(--header-height) + var(--space-14));
padding-bottom: var(--space-20);
}
.hero__content {
max-width: 760px;
}
.hero__title {
max-width: 11ch;
}
.hero__visual {
min-height: 560px;
}
.hero__visual-frame {
inset: 0 7% 0 7%;
}
.hero__product {
right: 12%;
width: min(58%, 410px);
}
.hero__floating-card--top {
top: 10%;
left: 2%;
}
.hero__floating-card--bottom {
right: 2%;
bottom: 10%;
}
.hero__scroll {
display: none;
}
.section__header {
max-width: 680px;
}
.advantages__layout {
grid-template-columns: 1fr;
gap: var(--space-14);
}
.advantages__visual {
min-height: 600px;
order: 2;
}
.advantages__content {
order: 1;
}
.advantages__image-shell {
inset: 0 10% 6% 0;
}
.advantages__stat {
width: min(48%, 290px);
}
.portfolio__header {
align-items: flex-start;
flex-direction: column;
}
.portfolio__controls {
align-self: flex-end;
}
.portfolio__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: 260px;
}
.portfolio-card--featured {
grid-column: 1 / -1;
grid-row: auto;
min-height: 420px;
}
.portfolio-card:nth-child(4) {
grid-column: auto;
}
.contact-cta__shell {
grid-template-columns: 1fr;
}
.contact-cta__title {
max-width: 14ch;
}
.contact-cta__info {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__main {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.site-footer__brand {
grid-column: 1 / -1;
}
.site-footer__column:last-child {
grid-column: auto;
}
[data-parallax] {
transform: translate3d(calc(var(--parallax-x) * 0.55),
calc(var(--parallax-y) * 0.55),
0);
}
}
@media (max-width: 768px) {
:root {
--font-size-lg: 1.0625rem;
--space-16: 3.5rem;
--space-20: 4rem;
--space-24: 4.25rem;
--space-28: 4.5rem;
--radius-xl: 1.5rem;
--radius-2xl: 2rem;
}
.container,
.container--wide,
.site-header__inner,
.hero__container {
width: min(calc(100% - 32px), var(--container-width));
}
.section {
padding-block: var(--space-20);
}
.section--compact {
padding-block: var(--space-16);
}
.section__header {
margin-bottom: var(--space-10);
}
.section__eyebrow {
margin-bottom: var(--space-4);
}
.section__title {
max-width: 16ch;
}
.section__description {
font-size: var(--font-size-base);
}
.grid--2,
.grid--3,
.grid--4 {
grid-template-columns: 1fr;
}
.btn {
min-height: 50px;
}
.btn--lg {
min-height: 56px;
padding-inline: 1.4rem;
}
.hero__container {
gap: var(--space-8);
min-height: auto;
padding-top: calc(var(--header-height) + var(--space-14));
padding-bottom: var(--space-14);
}
.hero__badge {
margin-bottom: var(--space-5);
}
.hero__title {
max-width: 12ch;
font-size: clamp(3.2rem, 14vw, 5.25rem);
}
.hero__description {
margin-top: var(--space-5);
font-size: var(--font-size-base);
line-height: 1.75;
}
.hero__actions {
margin-top: var(--space-6);
}
.hero__trust {
gap: var(--space-3) var(--space-5);
margin-top: var(--space-8);
}
.hero__visual {
min-height: 500px;
}
.hero__visual-frame {
inset: 0 4%;
border-radius: 38% 38% var(--radius-xl) var(--radius-xl);
}
.hero__product {
right: 8%;
bottom: 1%;
width: min(68%, 390px);
}
.hero__floating-card {
max-width: 175px;
}
.hero__floating-card--top {
top: 8%;
left: 0;
}
.hero__floating-card--bottom {
right: 0;
bottom: 8%;
}
.services__grid {
grid-template-columns: 1fr;
}
.service-card {
min-height: auto;
padding: var(--space-6);
}
.advantages__visual {
min-height: 520px;
}
.advantages__image-shell {
inset: 0 8% 7% 0;
}
.advantages__stat {
width: min(62%, 270px);
padding: var(--space-6);
}
.advantages__stat-value {
font-size: 3.35rem;
}
.advantages__list {
grid-template-columns: 1fr;
}
.portfolio__grid {
grid-template-columns: 1fr;
grid-auto-rows: auto;
}
.portfolio-card,
.portfolio-card--featured {
grid-column: auto;
min-height: 330px;
}
.portfolio-card--featured {
min-height: 420px;
}
.portfolio__controls {
align-self: flex-start;
}
.contact-cta__shell {
gap: var(--space-8);
padding: var(--space-10) var(--space-6);
}
.contact-cta__description {
font-size: var(--font-size-base);
}
.contact-cta__info {
grid-template-columns: 1fr;
}
.contact-card {
padding: var(--space-4);
}
.site-footer__main {
grid-template-columns: 1fr 1fr;
gap: var(--space-10) var(--space-6);
padding-block: var(--space-16);
}
.site-footer__brand {
grid-column: 1 / -1;
}
.site-footer__bottom {
align-items: flex-start;
flex-direction: column;
}
.whatsapp-float {
right: var(--space-4);
bottom: var(--space-4);
}
.whatsapp-float__text {
display: none;
}
.whatsapp-float {
width: 58px;
height: 58px;
min-height: 58px;
justify-content: center;
padding: 0;
}
.whatsapp-float__icon {
width: 44px;
height: 44px;
}
[data-parallax] {
transform: translate3d(calc(var(--parallax-x) * 0.35),
calc(var(--parallax-y) * 0.35),
0);
}
}
@media (max-width: 640px) {
:root {
--header-height: 70px;
}
.site-brand__name {
display: none;
}
.site-brand__logo,
.site-header.is-scrolled .site-brand__logo {
height: 40px;
}
.site-header__inner {
gap: var(--space-4);
}
.hero::before {
background-size: 52px 52px;
}
.hero__container {
padding-top: calc(var(--header-height) + var(--space-12));
}
.hero__actions {
display: grid;
grid-template-columns: 1fr;
}
.hero__actions .btn {
width: 100%;
}
.hero__trust {
display: grid;
grid-template-columns: 1fr;
}
.hero__visual {
min-height: 440px;
}
.hero__visual-frame {
inset: 0;
}
.hero__product {
right: 7%;
width: min(72%, 340px);
}
.hero__floating-card {
max-width: 150px;
padding: var(--space-3);
border-radius: var(--radius-md);
}
.hero__floating-label {
font-size: 0.58rem;
}
.hero__floating-value {
font-size: 0.84rem;
}
.hero__floating-card--top {
top: 5%;
left: -2%;
}
.hero__floating-card--bottom {
right: -2%;
bottom: 5%;
}
.section__title {
font-size: clamp(2.35rem, 10vw, 3.4rem);
}
.section__eyebrow::before {
width: 24px;
}
.service-card__number {
top: var(--space-5);
right: var(--space-5);
}
.advantages__visual {
min-height: 450px;
}
.advantages__image-shell {
inset: 0 5% 8% 0;
}
.advantages__stat {
width: min(70%, 250px);
padding: var(--space-5);
}
.advantage-item {
padding: var(--space-4);
}
.portfolio-card {
min-height: 300px;
}
.portfolio-card--featured {
min-height: 380px;
}
.portfolio-card__content {
right: var(--space-5);
bottom: var(--space-5);
left: var(--space-5);
}
.contact-cta__shell {
border-radius: var(--radius-xl);
}
.contact-cta__actions {
display: grid;
grid-template-columns: 1fr;
}
.contact-cta__actions .btn {
width: 100%;
}
.site-footer__main {
grid-template-columns: 1fr;
}
.site-footer__brand {
grid-column: auto;
}
.site-footer__legal {
align-items: flex-start;
flex-direction: column;
gap: var(--space-2);
}
}
@media (max-width: 480px) {
:root {
--font-size-base: 0.96rem;
--space-20: 3.75rem;
--space-24: 4rem;
}
.container,
.container--wide,
.site-header__inner,
.hero__container {
width: min(calc(100% - 24px), var(--container-width));
}
.site-nav {
padding-inline: 12px;
}
.hero__title {
font-size: clamp(2.9rem, 15vw, 4.4rem);
}
.hero__description {
line-height: 1.7;
}
.hero__visual {
min-height: 390px;
}
.hero__product {
right: 5%;
width: min(76%, 305px);
}
.hero__floating-card {
max-width: 132px;
}
.hero__floating-card--top {
top: 4%;
left: -1%;
}
.hero__floating-card--bottom {
right: -1%;
bottom: 4%;
}
.card,
.service-card,
.portfolio-card,
.contact-cta__shell {
border-radius: 1.25rem;
}
.advantages__visual {
min-height: 400px;
}
.advantages__stat {
width: min(78%, 235px);
}
.advantages__stat-value {
font-size: 3rem;
}
.portfolio-card {
min-height: 280px;
}
.portfolio-card--featured {
min-height: 340px;
}
.contact-card__value {
overflow-wrap: anywhere;
}
.site-footer__socials {
flex-wrap: wrap;
}
}
@media (max-width: 1100px) {
.partners {
padding-block: var(--space-20);
}
.partners__header {
max-width: 700px;
margin-bottom: var(--space-8);
}
.partners__title {
max-width: 17ch;
}
.partners__description {
max-width: 620px;
}
.partners__group {
gap: var(--space-4);
padding-right: var(--space-4);
}
.partner-logo {
width: 200px;
height: 122px;
}
.partners__marquee::before,
.partners__marquee::after {
width: 90px;
}
}
@media (max-width: 900px) {
.partners {
padding-block: var(--space-16);
}
.partners__header {
width: min(calc(100% - 36px), 680px);
margin-inline: auto;
margin-bottom: var(--space-8);
}
.partners__title {
font-size: clamp(2.35rem, 7vw, 3.5rem);
}
.partners__description {
font-size: var(--font-size-base);
}
.partner-logo {
width: 188px;
height: 116px;
padding: var(--space-4);
}
.partners__marquee::before,
.partners__marquee::after {
width: 72px;
}
.partners__note {
width: min(calc(100% - 36px), var(--container-width));
margin-top: var(--space-6);
}
}
@media (max-width: 768px) {
.partners {
padding-block: var(--space-16);
}
.partners__header {
width: min(calc(100% - 32px), 620px);
margin-bottom: var(--space-6);
}
.partners__eyebrow {
gap: var(--space-2);
font-size: 0.68rem;
letter-spacing: 0.13em;
}
.partners__eyebrow::before,
.partners__eyebrow::after {
width: 22px;
}
.partners__title {
max-width: 16ch;
margin-top: var(--space-4);
font-size: clamp(2.2rem, 9vw, 3.1rem);
}
.partners__description {
margin-top: var(--space-3);
font-size: var(--font-size-sm);
line-height: 1.75;
}
.partners__group {
gap: var(--space-3);
padding-right: var(--space-3);
}
.partner-logo {
width: 168px;
height: 106px;
padding: var(--space-3);
border-radius: var(--radius-md);
}
.partners__marquee::before,
.partners__marquee::after {
width: 52px;
}
.partners__note {
width: min(calc(100% - 32px), var(--container-width));
font-size: 0.68rem;
}
}
@media (max-width: 640px) {
.partners {
padding-block: 3.75rem;
}
.partners__header {
width: min(calc(100% - 28px), 560px);
}
.partners__eyebrow::before,
.partners__eyebrow::after {
width: 16px;
}
.partners__title {
font-size: clamp(2rem, 10vw, 2.8rem);
}
.partner-logo {
width: 152px;
height: 96px;
padding: 0.7rem;
}
.partners__marquee::before,
.partners__marquee::after {
width: 36px;
}
.partners__note {
width: min(calc(100% - 28px), var(--container-width));
margin-top: var(--space-5);
}
}
@media (max-width: 480px) {
.partners__header {
width: min(calc(100% - 24px), 480px);
}
.partners__eyebrow {
letter-spacing: 0.1em;
}
.partners__eyebrow::before,
.partners__eyebrow::after {
display: none;
}
.partners__title {
max-width: 15ch;
font-size: clamp(1.9rem, 11vw, 2.55rem);
}
.partners__description {
font-size: 0.82rem;
}
.partner-logo {
width: 138px;
height: 90px;
padding: 0.65rem;
}
.partners__marquee::before,
.partners__marquee::after {
width: 26px;
}
.partners__note {
width: min(calc(100% - 24px), var(--container-width));
}
}
@media (hover: none) and (pointer: coarse) {
.partner-logo:hover {
border-color: rgba(8, 27, 58, 0.09);
box-shadow: 0 12px 34px rgba(8, 27, 58, 0.06);
transform: none;
}
.partner-logo:hover::before {
opacity: 0;
}
.partner-logo:hover .partner-logo__image {
filter:
saturate(0.82) contrast(1.03);
transform: none;
}
}
@media (max-width: 1280px) {
.hero__container {
gap: clamp(2.75rem, 4.5vw, 4.75rem);
}
.hero__visual-frame {
inset: 5% 1% 1% 8%;
}
.hero__product {
right: 7%;
width: min(63%, 410px);
}
.hero .glass-panel {
box-shadow: 0 16px 40px rgba(8, 27, 58, 0.1);
}
}
@media (max-width: 1100px) {
.hero__container {
gap: 2.75rem;
}
.hero__visual-frame {
inset: 4% 1% 1% 7%;
}
.hero__product {
right: 6%;
width: min(62%, 380px);
}
.hero__orb--blue {
width: 160px;
height: 160px;
}
.hero__orb--gold {
width: 92px;
height: 92px;
}
.hero__floating-card {
max-width: 182px;
padding: 0.9rem 1rem;
}
}
@media (max-width: 900px) {
.site-header {
background: rgba(6, 21, 46, 0.96);
}
.site-header.is-scrolled,
.site-header.nav-open {
color: var(--color-white);
border-color: rgba(255, 255, 255, 0.08);
background: rgba(6, 21, 46, 0.96);
box-shadow: 0 12px 36px rgba(8, 27, 58, 0.16);
}
.site-header.nav-open .site-brand__logo {
filter: none;
}
.site-header.nav-open .site-brand__subtitle {
color: var(--color-accent);
}
.hero__container {
gap: var(--space-10);
padding-top: calc(var(--header-height) + var(--space-14));
}
.hero__content {
max-width: 720px;
}
.hero__title {
max-width: 10.5ch;
}
.hero__description {
max-width: 620px;
}
.hero__visual {
width: min(100%, 680px);
min-height: 535px;
margin-inline: auto;
}
.hero__visual-frame {
inset: 0 7% 1% 7%;
border-radius: 38% 38% var(--radius-2xl) var(--radius-2xl);
box-shadow: 0 28px 70px rgba(8, 27, 58, 0.14);
}
.hero__product {
right: 11%;
bottom: 1%;
width: min(57%, 390px);
}
.hero__floating-card--top {
top: 9%;
left: 2%;
}
.hero__floating-card--bottom {
right: 2%;
bottom: 9%;
}
.hero .badge--glass {
background: rgba(255, 255, 255, 0.94);
}
.hero__trust-item {
padding: 0.55rem 0.8rem;
border: 1px solid rgba(8, 27, 58, 0.09);
border-radius: var(--radius-pill);
background: rgba(255, 255, 255, 0.76);
box-shadow: 0 8px 20px rgba(8, 27, 58, 0.04);
}
.hero__orb--blue {
opacity: 0.72;
}
.hero__orb--gold {
opacity: 0.78;
}
}
@media (max-width: 768px) {
.hero__container {
gap: var(--space-8);
padding-top: calc(var(--header-height) + var(--space-12));
padding-bottom: var(--space-12);
}
.hero__content {
width: 100%;
}
.hero__badge {
max-width: 100%;
white-space: normal;
}
.hero__title {
max-width: 11ch;
font-size: clamp(3rem, 13vw, 4.8rem);
}
.hero__description {
max-width: 560px;
margin-top: var(--space-4);
line-height: 1.72;
}
.hero__actions {
margin-top: var(--space-6);
}
.hero__trust {
gap: var(--space-3);
margin-top: var(--space-7, 1.75rem);
}
.hero__trust-item {
font-size: 0.78rem;
}
.hero__visual {
min-height: 470px;
}
.hero__visual-frame {
inset: 0 4% 1%;
border-radius: 36% 36% var(--radius-xl) var(--radius-xl);
box-shadow: 0 24px 56px rgba(8, 27, 58, 0.13);
}
.hero__product {
right: 8%;
bottom: 0;
width: min(65%, 360px);
}
.hero__floating-card {
max-width: 160px;
padding: 0.8rem 0.9rem;
}
.hero__floating-card--top {
top: 7%;
left: 0;
}
.hero__floating-card--bottom {
right: 0;
bottom: 7%;
}
.hero__floating-label {
font-size: 0.6rem;
}
.hero__floating-value {
font-size: 0.88rem;
}
.partners__marquee::before,
.partners__marquee::after {
background-color: transparent;
}
}
@media (max-width: 640px) {
.site-header {
box-shadow: 0 8px 26px rgba(8, 27, 58, 0.12);
}
.hero__container {
padding-top: calc(var(--header-height) + var(--space-10));
padding-bottom: var(--space-10);
}
.hero__title {
max-width: 10.5ch;
}
.hero__description {
font-size: 0.95rem;
}
.hero__actions {
gap: var(--space-3);
}
.hero .btn--outline-light {
background: rgba(255, 255, 255, 0.94);
}
.hero__trust {
gap: var(--space-2);
}
.hero__trust-item {
width: 100%;
justify-content: flex-start;
padding: 0.65rem 0.8rem;
border-radius: var(--radius-md);
}
.hero__visual {
min-height: 405px;
}
.hero__visual-frame {
inset: 0 1% 1%;
border-radius: 32% 32% var(--radius-xl) var(--radius-xl);
}
.hero__product {
right: 6%;
width: min(69%, 320px);
}
.hero__floating-card {
max-width: 138px;
padding: 0.7rem 0.75rem;
}
.hero__floating-card--top {
top: 4%;
left: 0;
}
.hero__floating-card--bottom {
right: 0;
bottom: 4%;
}
.hero__orb--blue {
top: 4%;
right: -12%;
width: 130px;
height: 130px;
}
.hero__orb--gold {
right: 16%;
bottom: 4%;
width: 76px;
height: 76px;
}
}
@media (max-width: 480px) {
.hero__container {
padding-top: calc(var(--header-height) + var(--space-8));
}
.hero__badge {
font-size: 0.66rem;
line-height: 1.35;
}
.hero__title {
max-width: 10ch;
font-size: clamp(2.75rem, 14vw, 4rem);
}
.hero__description {
font-size: 0.9rem;
}
.hero__visual {
min-height: 360px;
}
.hero__visual-frame {
inset: 0;
border-radius: 29% 29% 1.2rem 1.2rem;
}
.hero__product {
right: 4%;
width: min(72%, 285px);
}
.hero__floating-card--top {
top: 4%;
left: -1%;
}
.hero__floating-card--bottom {
display: none;
}
.hero__orb--blue {
opacity: 0.55;
}
.hero__orb--gold {
opacity: 0.62;
}
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
.hero__container {
gap: var(--space-6);
padding-top: calc(var(--header-height) + var(--space-6));
padding-bottom: var(--space-8);
}
.hero__visual {
min-height: 380px;
}
.hero__visual-frame {
inset: 0 8%;
}
}
@media (hover: none) and (pointer: coarse) {
.hero .btn--outline-light:hover {
color: var(--color-navy);
border-color: rgba(8, 27, 58, 0.18);
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 10px 28px rgba(8, 27, 58, 0.05);
}
.hero__trust-item {
transform: none;
}
}
@media (max-height: 720px) and (min-width: 901px) {
.hero__container {
padding-top: calc(var(--header-height) + var(--space-8));
padding-bottom: var(--space-10);
}
.hero__visual {
min-height: 500px;
}
.hero__description {
margin-top: var(--space-4);
}
.hero__actions {
margin-top: var(--space-6);
}
.hero__trust {
margin-top: var(--space-6);
}
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 900px) {
.site-nav {
max-height: calc(100dvh - var(--header-height));
}
.hero__container {
min-height: auto;
}
.hero__visual {
min-height: 420px;
}
.hero__floating-card {
display: none;
}
}
@media (hover: none) and (pointer: coarse) {
.btn:hover,
.card:hover,
.service-card:hover,
.advantage-item:hover,
.portfolio__control:hover,
.site-footer__social:hover,
.whatsapp-float:hover {
transform: none;
}
.card:hover,
.service-card:hover {
box-shadow: var(--shadow-xs);
}
.portfolio-card:hover .portfolio-card__image {
transform: none;
}
.btn:hover::before {
transform: translateX(-120%);
}
}
@media (min-resolution: 2dppx) {
.hero::before,
.u-surface-grid {
background-position: 0.5px 0.5px;
}
}
@media print {
.site-header,
.nav-toggle,
.hero__scroll,
.portfolio__controls,
.whatsapp-float,
.site-footer__socials {
display: none !important;
}
body {
color: #000000;
background: #ffffff;
}
.hero,
.portfolio,
.contact-cta__shell,
.site-footer {
color: #000000;
background: #ffffff !important;
box-shadow: none;
}
.hero {
min-height: auto;
}
.section,
.hero__container,
.site-footer__main {
padding-block: 2rem;
}
.hero__container,
.advantages__layout,
.contact-cta__shell,
.site-footer__main {
display: block;
}
.hero__visual,
.advantages__visual,
.portfolio__grid {
margin-top: 2rem;
}
.hero__title,
.hero__description,
.hero__trust,
.hero__floating-label,
.hero__floating-value {
color: #000000 !important;
}
.hero .badge--glass,
.hero .glass-panel,
.hero .btn--outline-light {
color: #000000 !important;
border-color: #cccccc !important;
background: #ffffff !important;
box-shadow: none !important;
}
a {
text-decoration: underline;
}
}
:root {
--consent-navy: #081b3a;
--consent-navy-soft: #102a52;
--consent-blue: #176ee8;
--consent-cyan: #20c6df;
--consent-white: #ffffff;
--consent-text: #25344b;
--consent-muted: #66758a;
--consent-border: rgba(8, 27, 58, 0.14);
--consent-shadow: 0 24px 80px rgba(8, 27, 58, 0.22);
}
.cookie-consent,
.cookie-consent *,
.cookie-consent *::before,
.cookie-consent *::after {
box-sizing: border-box;
}
.cookie-consent[hidden] {
display: none !important;
}
.cookie-consent {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: flex-end;
justify-content: center;
width: 100%;
max-width: 100vw;
padding:
1rem
1rem
max(1rem, env(safe-area-inset-bottom));
pointer-events: none;
}
.cookie-consent__panel {
width: min(100%, 1080px);
max-width: 1080px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1.5rem;
padding: 1.35rem 1.45rem;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 24px;
background:
radial-gradient(
circle at 90% 20%,
rgba(32, 198, 223, 0.16),
transparent 18rem
),
linear-gradient(
145deg,
rgba(8, 27, 58, 0.98),
rgba(16, 42, 82, 0.98)
);
box-shadow: var(--consent-shadow);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
overflow: hidden;
pointer-events: auto;
animation: consent-panel-in 360ms ease both;
}
.cookie-consent__copy {
min-width: 0;
}
.cookie-consent__eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.55rem;
color: #9cefff;
font-size: 0.68rem;
font-weight: 800;
line-height: 1.2;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.cookie-consent__eyebrow::before {
content: "";
width: 22px;
height: 1px;
flex: 0 0 auto;
background: currentColor;
}
.cookie-consent__title {
margin: 0;
color: var(--consent-white);
font-family: "Cormorant Garamond", serif;
font-size: clamp(1.55rem, 3vw, 2.1rem);
font-weight: 600;
line-height: 1;
letter-spacing: -0.02em;
}
.cookie-consent__description {
max-width: 720px;
margin: 0.65rem 0 0;
color: rgba(255, 255, 255, 0.72);
font-family: "Manrope", sans-serif;
font-size: 0.82rem;
line-height: 1.7;
overflow-wrap: anywhere;
}
.cookie-consent__link {
display: inline-flex;
align-items: center;
margin-top: 0.65rem;
color: #9cefff;
font-family: "Manrope", sans-serif;
font-size: 0.76rem;
font-weight: 800;
line-height: 1.4;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.25em;
}
.cookie-consent__link:hover {
color: var(--consent-white);
}
.cookie-consent__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0.7rem;
min-width: max-content;
}
.cookie-consent__button {
min-height: 46px;
min-width: 150px;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0.8rem 1rem;
border-radius: 999px;
font-family: "Manrope", sans-serif;
font-size: 0.76rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
white-space: nowrap;
cursor: pointer;
transition:
transform 180ms ease,
border-color 180ms ease,
background-color 180ms ease,
box-shadow 180ms ease;
}
.cookie-consent__button[data-consent-reject] {
border: 1px solid rgba(255, 255, 255, 0.25);
background: rgba(255, 255, 255, 0.06);
color: rgba(255, 255, 255, 0.86);
}
.cookie-consent__button[data-consent-reject]:hover {
border-color: rgba(255, 255, 255, 0.5);
background: rgba(255, 255, 255, 0.12);
color: var(--consent-white);
}
.cookie-consent__button[data-consent-accept] {
border: 1px solid transparent;
background:
linear-gradient(
135deg,
var(--consent-blue),
var(--consent-cyan)
);
color: var(--consent-white);
box-shadow: 0 12px 28px rgba(23, 110, 232, 0.28);
}
.cookie-consent__button[data-consent-accept]:hover {
box-shadow: 0 16px 34px rgba(23, 110, 232, 0.36);
}
@media (hover: hover) and (pointer: fine) {
.cookie-consent__button:hover {
transform: translateY(-2px);
}
}
.cookie-consent__button:focus-visible,
.cookie-consent__link:focus-visible {
outline: 3px solid rgba(156, 239, 255, 0.72);
outline-offset: 3px;
}
.is-consent-open .whatsapp-float {
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateY(16px);
}
@media (max-width: 900px) {
.cookie-consent {
padding:
0.85rem
0.85rem
max(0.85rem, env(safe-area-inset-bottom));
}
.cookie-consent__panel {
grid-template-columns: 1fr;
align-items: stretch;
gap: 1.1rem;
width: 100%;
max-height: calc(100dvh - 1.7rem);
padding: 1.25rem;
border-radius: 22px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
}
.cookie-consent__actions {
width: 100%;
min-width: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cookie-consent__button {
width: 100%;
min-width: 0;
}
}
@media (max-width: 580px) {
.cookie-consent {
align-items: flex-end;
padding:
0.65rem
0.65rem
max(0.65rem, env(safe-area-inset-bottom));
background: rgba(3, 13, 30, 0.3);
}
.cookie-consent__panel {
width: 100%;
max-width: 100%;
max-height: calc(100dvh - 1.3rem);
gap: 1rem;
padding: 1.15rem;
border-radius: 20px;
}
.cookie-consent__eyebrow {
margin-bottom: 0.45rem;
font-size: 0.62rem;
letter-spacing: 0.13em;
}
.cookie-consent__title {
font-size: clamp(1.55rem, 8vw, 1.9rem);
line-height: 1.02;
}
.cookie-consent__description {
margin-top: 0.55rem;
font-size: 0.76rem;
line-height: 1.65;
}
.cookie-consent__link {
margin-top: 0.55rem;
font-size: 0.72rem;
}
.cookie-consent__actions {
grid-template-columns: 1fr;
gap: 0.55rem;
}
.cookie-consent__button {
min-height: 44px;
padding: 0.72rem 0.9rem;
font-size: 0.74rem;
}
.cookie-consent__button[data-consent-accept] {
order: -1;
}
}
@media (max-height: 560px) {
.cookie-consent {
align-items: center;
}
.cookie-consent__panel {
max-height: calc(100dvh - 1.3rem);
}
}
@keyframes consent-panel-in {
from {
opacity: 0;
transform: translateY(24px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
.cookie-consent__panel {
animation: none;
}
.cookie-consent__button,
.whatsapp-float {
transition: none;
}
}
.hero__visual-frame { backdrop-filter:none; -webkit-backdrop-filter:none; }
.hero__image,.portfolio-card__image,.advantages__image { background:#edf0f5; }
.site-brand__logo { object-fit:contain; }
.particle { display:none; }
.cookie-consent { background:transparent; }
.cookie-consent__panel { max-width:780px; padding:1rem 1.2rem; gap:1rem; background:#102a52; backdrop-filter:none; -webkit-backdrop-filter:none; }
.cookie-consent__title { font-size:1.5rem; }
.cookie-consent__description { line-height:1.5; }
.cookie-consent__actions { min-width:0; }
.cookie-consent__button { min-width:0; white-space:normal; }
@media (max-width:900px) {
.cookie-consent__panel { gap:.65rem; padding:.9rem 1rem; border-radius:16px; }
.cookie-consent__actions { grid-template-columns:1fr 1fr; gap:.6rem; }
.cookie-consent__button[data-consent-accept] { order:0; }
.cookie-consent__title { font-size:1.3rem; }
.cookie-consent__description { margin-top:.35rem; font-size:.75rem; }
.cookie-consent__link { margin-top:.35rem; }
.cookie-consent__button { padding:.6rem .5rem; min-height:44px; }
.hero__product { filter:drop-shadow(0 12px 18px rgba(8,27,58,.16)); }
.glass-panel,.site-header { backdrop-filter:none; -webkit-backdrop-filter:none; }
[data-parallax] { transform:none; }
}
@media (pointer:coarse) {
.partner-logo { scroll-snap-align:start; }
.partners__marquee { scroll-snap-type:x proximity; }
.partner-logo:hover { transform:none; }
}