/* MELOZZ LANDING — generált fájl, NE szerkeszd kézzel. Forrás: assets/css/src/*  (build-css.php, 2026-09-30 07:33) */
:root {
--primary: #2954e5;
--primary-dark: #1e43c4;
--primary-light: #6e8dff;
--primary-glow: rgba(41, 84, 229, .18);
--secondary: #0e8a6e;
--background: #ffffff;
--background-alt: #f5f7fb;
--surface: #ffffff;
--text: #15213b;
--text-light: #4b5674;
--text-lighter: #7a859e;
--border: #e2e7ef;
--card-bg: var(--surface);
--card-border: var(--border);
--success: #0e8a6e;
--danger: #c62839;
--modal-overlay: rgba(10, 14, 24, .94);
--modal-text: #ffffff;
--modal-control-bg: rgba(255, 255, 255, .16);
--modal-control-hover: rgba(255, 255, 255, .32);
--modal-control-border: rgba(255, 255, 255, .28);
--modal-caption-bg: rgba(0, 0, 0, .7);
--dark-bg: #0f1420;
--dark-surface: #161c2a;
--dark-text: #e7ebf3;
--space-1: .25rem; --space-2: .5rem; --space-3: .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-xs: var(--space-2); --space-sm: var(--space-4); --space-md: var(--space-6);
--space-lg: var(--space-8); --space-xl: var(--space-12); --space-2xl: var(--space-16); --space-3xl: var(--space-20);
--section-py: clamp(3rem, 2rem + 4vw, 5.5rem);
--container-width: 1200px;
--container-small: 800px;
--container-px: clamp(1rem, .5rem + 2.5vw, 2rem);
--font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
--fs-h1: clamp(2rem, 1.15rem + 3.6vw, 3.5rem);
--fs-h2: clamp(1.625rem, 1.15rem + 2vw, 2.5rem);
--fs-h3: clamp(1.15rem, 1rem + .7vw, 1.5rem);
--fs-lead: clamp(1.05rem, .95rem + .5vw, 1.25rem);
--fs-body: 1rem;
--fs-small: .875rem;
--lh-tight: 1.15; --lh-snug: 1.3; --lh-body: 1.6;
--h1-size: var(--fs-h1); --h2-size: var(--fs-h2); --h3-size: var(--fs-h3);
--body-size: var(--fs-body); --small-size: var(--fs-small);
--font-base: var(--fs-body); --font-sm: var(--fs-small); --font-lg: var(--fs-lead); --font-xl: var(--fs-h3);
--heading-weight: 800;
--heading-transform: none;
--heading-scale: 1;
--radius: 16px; --radius-sm: 8px; --radius-lg: 24px; --border-radius: var(--radius);
--shadow-sm: 0 4px 14px rgba(21, 33, 59, .06);
--shadow-md: 0 12px 32px rgba(21, 33, 59, .09);
--shadow-lg: 0 24px 56px rgba(21, 33, 59, .13);
--transition: all .25s cubic-bezier(.4, 0, .2, 1);
--btn-radius: 12px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-family);
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--text);
background: var(--background);
-webkit-font-smoothing: antialiased;
overflow-x: clip;
}
img, svg, video, iframe { max-width: 100%; display: block; }
img { height: auto; }
a { color: var(--primary-text, var(--primary)); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 var(--space-4); }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
overflow-wrap: anywhere;
hyphens: auto;
margin: 0 0 var(--space-3);
font-weight: var(--heading-weight);
line-height: var(--lh-tight);
letter-spacing: -.015em;
text-transform: var(--heading-transform);
color: var(--heading-color, inherit);
text-wrap: balance;
}
h1 { font-size: calc(var(--fs-h1) * var(--heading-scale)); }
h2 { font-size: calc(var(--fs-h2) * var(--heading-scale)); }
h3 { font-size: calc(var(--fs-h3) * var(--heading-scale)); }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; border-radius: 4px; }
::selection { background: var(--primary); color: #fff; }
.container {
width: 100%;
max-width: var(--section-maxw, var(--container-width));
margin-inline: auto;
padding-inline: var(--section-px, var(--container-px));
}
.section {
position: relative;
padding-block: var(--section-py);
color: var(--section-text-color, inherit);
font-family: var(--section-font, inherit);
}
.section + .section { border-top: 1px solid transparent; }
.section-eyebrow {
display: inline-block;
margin-bottom: var(--space-3);
padding: .3em .8em;
border-radius: 999px;
background: var(--primary-glow);
color: var(--primary-text, var(--primary));
font-size: var(--fs-small);
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
}
.section-title {
margin-bottom: var(--space-3);
font-size: calc(var(--fs-h2) * var(--heading-scale));
color: var(--field-title-color, var(--heading-color, inherit));
font-weight: var(--field-title-weight, var(--heading-weight));
font-style: var(--field-title-style, normal);
}
.section-subtitle {
max-width: 62ch;
margin: 0 0 var(--space-8);
font-size: var(--fs-lead);
color: var(--field-subtitle-color, var(--subtitle-color, var(--text-light)));
font-weight: var(--field-subtitle-weight, 400);
}
.text-center .section-title, .text-center .section-subtitle, .text-center .section-eyebrow { margin-inline: auto; }
.text-center { text-align: center; }
.btn, .btn-group a, .hero-cta-group a, .section-cta a, .about-cta a, .cta-buttons a {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .5em;
min-height: 48px;
padding: .8em 1.5em;
border: var(--btn-border, 1px solid transparent);
border-radius: var(--btn-radius, 12px);
background: var(--btn-bg, var(--button-color, var(--primary)));
color: var(--btn-color, #fff);
font: inherit;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
transition: var(--transition);
}
.btn:hover, .btn-group a:hover, .hero-cta-group a:hover, .section-cta a:hover, .about-cta a:hover, .cta-buttons a:hover {
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 10px 24px var(--primary-glow);
}
.btn-primary { background: var(--btn-bg, var(--primary)); color: var(--btn-color, #fff); }
.btn-secondary { background: var(--secondary); color: #fff; }
.btn-outline, .btn-group a.btn-outline, .hero-cta-group a.btn-outline, .section-cta a.btn-outline, .about-cta a.btn-outline, .cta-buttons a.btn-outline { background: transparent; color: var(--btn-bg, var(--primary)); border-color: currentColor; }
.btn-outline:hover, .btn-group a.btn-outline:hover, .hero-cta-group a.btn-outline:hover, .section-cta a.btn-outline:hover, .about-cta a.btn-outline:hover, .cta-buttons a.btn-outline:hover { background: var(--btn-bg, var(--primary)); color: #fff; }
.btn-sm { min-height: 38px; padding: .5em 1em; font-size: var(--fs-small); }
.btn-lg { min-height: 56px; padding: 1em 2em; font-size: var(--fs-lead); }
.btn-block { width: 100%; }
.btn-group, .hero-cta-group, .section-cta, .about-cta, .cta-buttons {
display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6);
}
.btn-icon { display: inline-flex; }
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); }
.card {
background: var(--card-bg, var(--surface));
border: var(--card-border, 1px solid var(--border));
border-radius: var(--card-radius, var(--radius));
padding: var(--card-padding, var(--space-6));
box-shadow: var(--card-shadow, var(--shadow-sm));
transition: var(--transition);
}
.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.image-gallery { display: grid; gap: var(--space-3); }
.gallery-image-wrapper { overflow: hidden; border-radius: var(--img-radius, var(--radius)); box-shadow: var(--img-shadow, none); }
.responsive-image, .gallery-thumbnail { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.image-modal-trigger { cursor: zoom-in; }
.image-caption { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--text-light); }
.hide-mobile { display: none; }
.section { padding-inline: 0; }
@media (max-width: 639.98px) {
.section { padding-top: var(--mobile-padding, var(--section-py)); padding-bottom: var(--mobile-padding, var(--section-py)); font-size: var(--mobile-font-size, inherit); }
.section-title, .hero-title { font-size: var(--mobile-title-size, calc(var(--fs-h2) * var(--heading-scale))); }
.hero-title { font-size: var(--mobile-title-size, calc(var(--fs-h1) * var(--heading-scale))); }
[style*="--btn-mobile-full"] .btn-group a, [style*="--btn-mobile-full"] .hero-cta-group a, [style*="--btn-mobile-full"] .cta-buttons a { width: 100%; }
}
@media (min-width: 640px) {
.hide-mobile { display: revert; }
.hide-tablet { display: none; }
.grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.hide-tablet { display: revert; }
.hide-desktop { display: none; }
.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)); }
.container { padding-inline: var(--section-px-desktop, var(--container-px)); }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms; animation-iteration-count: 1; transition-duration: .001ms; scroll-behavior: auto; }
[data-animate], [data-load-animate] { opacity: 1; transform: none; }
}
.component-hero.section { padding-block: clamp(3.5rem, 2.5rem + 5vw, 7rem); }
.hero-content { display: grid; gap: var(--space-8); align-items: center; }
.hero-text { min-width: 0; }
.hero-pre-title {
display: inline-block; margin-bottom: var(--space-4); padding: .35em .9em; border-radius: 999px;
background: var(--primary-glow); color: var(--primary-text, var(--primary)); font-size: var(--fs-small); font-weight: 700; letter-spacing: .04em;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.hero-badge { padding: .3em .7em; border-radius: 999px; border: 1px solid var(--border); font-size: var(--fs-small); color: var(--text-light); }
.hero-title {
margin-bottom: var(--space-4);
font-size: calc(var(--fs-h1) * var(--heading-scale));
line-height: var(--lh-tight);
color: var(--field-title-color, var(--heading-color, inherit));
font-weight: var(--field-title-weight, var(--heading-weight));
}
.hero-subtitle {
margin: 0 0 var(--space-4); font-size: var(--fs-lead); line-height: var(--lh-snug); font-weight: 600;
color: var(--field-subtitle-color, var(--subtitle-color, inherit));
}
.hero-description { max-width: 60ch; margin: 0 0 var(--space-6); color: var(--field-description-color, var(--text-light)); font-size: var(--fs-body); }
.text-center .hero-description, .text-center .hero-subtitle { margin-inline: auto; }
.hero-features-list { display: grid; gap: var(--space-3); margin: var(--space-2) 0 var(--space-6); }
.hero-feature-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.hero-feature-icon { flex: 0 0 auto; margin-top: .2em; color: var(--primary-text, var(--primary)); font-size: 1.1em; }
.hero-feature-text { display: flex; flex-direction: column; }
.hero-feature-title { font-weight: 700; }
.hero-feature-desc { color: var(--text-light); font-size: var(--fs-small); }
.hero-cta-group { margin-top: var(--space-2); }
.hero-trust-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-6); }
.trust-badge { padding: .3em .7em; border-radius: var(--radius-sm); background: var(--background-alt); font-size: var(--fs-small); color: var(--text-light); }
.hero-image { min-width: 0; }
.hero-img-wrapper { grid-template-columns: 1fr; }
.hero-img-wrapper .responsive-image { aspect-ratio: 4 / 3; border-radius: var(--img-radius, var(--radius-lg)); box-shadow: var(--img-shadow, var(--shadow-lg)); }
.hero-image-link { display: block; }
@media (min-width: 1024px) {
.hero-content.has-image { grid-template-columns: 1.1fr .9fr; gap: var(--space-12); }
.variant-split .hero-content { grid-template-columns: 1fr 1fr; }
.variant-centered .hero-content, .hero-content.text-center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.variant-centered .hero-image { max-width: 820px; }
.variant-centered .hero-features-list { justify-items: center; }
.variant-centered .hero-cta-group, .text-center .hero-cta-group { justify-content: center; }
}
.service-card { display: flex; flex-direction: column; gap: var(--space-3); }
.service-icon {
display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px;
border-radius: var(--radius-sm); background: var(--primary-glow); color: var(--primary-text, var(--primary)); font-size: 1.6rem;
}
.service-image .responsive-image { aspect-ratio: 16 / 10; }
.service-title { margin: 0; font-size: var(--fs-h3); }
.service-description { margin: 0; color: var(--text-light); }
.service-price { font-weight: 800; color: var(--primary-text, var(--primary)); }
.service-extra { color: var(--text-light); font-size: var(--fs-small); }
.service-extra .uf-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-extra .uf-list-item .uf-inline, .service-extra .uf-list-item .uf-pair {
display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border-radius: 999px;
background: var(--background-alt); color: var(--text); font-size: var(--fs-small);
}
.service-card .btn { align-self: flex-start; margin-top: auto; }
.about-grid { display: grid; gap: var(--space-8); align-items: center; }
.about-image-wrapper { position: relative; }
.about-img-wrapper .responsive-image { aspect-ratio: 4 / 3; border-radius: var(--img-radius, var(--radius-lg)); box-shadow: var(--img-shadow, var(--shadow-md)); }
.image-badge {
position: absolute; left: var(--space-4); bottom: var(--space-4); padding: .5em 1em; border-radius: var(--radius-sm);
background: var(--primary); color: #fff; font-weight: 700; font-size: var(--fs-small); box-shadow: var(--shadow-md);
}
.about-content { min-width: 0; }
.about-text { color: var(--text-light); font-size: var(--fs-body); }
.about-text p:last-child { margin-bottom: 0; }
.about-features { display: grid; gap: var(--space-3); margin: var(--space-6) 0 0; }
.about-features li { display: flex; gap: var(--space-3); align-items: flex-start; }
.check-icon {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
border-radius: 50%; background: var(--primary-glow); color: var(--primary-text, var(--primary)); font-size: .85rem; font-weight: 800;
}
@media (min-width: 1024px) {
.about-grid.with-image { grid-template-columns: 1fr 1.1fr; gap: var(--space-12); }
.variant-split .about-grid.with-image { grid-template-columns: 1fr 1fr; }
}
.stats-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--mobile-columns, 2), minmax(0, 1fr)); }
.stat-card { text-align: center; padding: var(--space-6) var(--space-4); }
.stat-icon { margin-bottom: var(--space-2); font-size: 1.6rem; }
.stat-value {
font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3rem); font-weight: 900; line-height: 1;
color: var(--primary-text, var(--primary)); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.stat-label { margin-top: var(--space-2); font-size: var(--fs-small); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-light); }
.stat-description { margin: var(--space-2) 0 0; font-size: var(--fs-small); color: var(--text-light); }
.stat-value:not(.counter-value) { font-family: var(--font-heading, inherit); font-weight: var(--heading-weight); letter-spacing: -.01em; }
@media (min-width: 640px) { .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .stats-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); }
.gallery-item { padding: 0; overflow: hidden; }
.gallery-item .gallery-image-wrapper { position: relative; border-radius: 0; }
.gallery-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; transition: transform .5s ease; }
.gallery-item:hover .gallery-image { transform: scale(1.04); }
.gallery-overlay {
position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-1);
padding: var(--space-4); background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0) 65%);
color: #fff; opacity: 0; transition: opacity .3s ease; pointer-events: none;
}
.gallery-item:hover .gallery-overlay, .gallery-item:focus-within .gallery-overlay { opacity: 1; }
.gallery-item-title { margin: 0; font-size: var(--fs-body); color: #fff; }
.gallery-item-caption { margin: 0; font-size: var(--fs-small); opacity: .9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-zoom-btn {
position: absolute; top: var(--space-3); right: var(--space-3); width: 40px; height: 40px; border: 0; border-radius: 50%;
background: rgba(255,255,255,.9); color: var(--text); font-size: 1rem; cursor: pointer; pointer-events: auto;
}
.gallery-card-body { padding: var(--space-4); }
.gallery-card-title { margin: 0 0 var(--space-1); font-size: var(--fs-body); }
.gallery-card-text { margin: 0; font-size: var(--fs-small); color: var(--text-light); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gallery-after img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 640px) { .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .variant-grid-4 .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .variant-grid-2 .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.modal-overlay {
position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
padding: var(--space-4); background: var(--modal-overlay); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
body.modal-open { overflow: hidden; }
.modal-content { position: relative; width: min(100%, 1100px); max-height: 100%; display: flex; flex-direction: column; align-items: center; color: var(--modal-text); }
.modal-image { max-height: 78vh; width: auto; max-width: 100%; border-radius: var(--radius-sm); object-fit: contain; }
.modal-close {
position: absolute; top: -8px; right: 0; z-index: 2; width: 44px; height: 44px; border: 1px solid var(--modal-control-border); border-radius: 50%;
background: var(--modal-control-bg); color: var(--modal-text); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.modal-close:hover { background: var(--modal-control-hover); }
.modal-caption { margin-top: var(--space-3); padding: .5em 1em; border-radius: var(--radius-sm); background: var(--modal-caption-bg); font-size: var(--fs-small); max-width: 70ch; text-align: center; }
.modal-caption:empty { display: none; }
.gallery-modal-counter { position: absolute; top: -8px; left: 0; padding: .4em .8em; border-radius: 999px; background: var(--modal-control-bg); font-size: var(--fs-small); }
.gallery-modal-nav { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); pointer-events: none; }
.gallery-modal-prev, .gallery-modal-next {
pointer-events: auto; width: 48px; height: 48px; border: 1px solid var(--modal-control-border); border-radius: 50%;
background: var(--modal-control-bg); color: var(--modal-text); font-size: 1.2rem; cursor: pointer;
}
.gallery-modal-prev:hover, .gallery-modal-next:hover { background: var(--modal-control-hover); }
.testimonials-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); }
.testimonial-card { display: flex; flex-direction: column; gap: var(--space-4); }
.testimonial-rating { display: flex; gap: 2px; }
.star { color: var(--border); font-size: 1.05rem; }
.star.filled { color: var(--accent, #f5b301); }
.testimonial-quote { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); font-style: italic; }
.testimonial-author { display: flex; gap: var(--space-3); align-items: center; margin-top: auto; }
.testimonial-avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; }
.testimonial-avatar .image-gallery { display: block; }
.testimonial-avatar .gallery-image-wrapper { border-radius: 50%; }
.testimonial-avatar .gallery-thumbnail { width: 48px; height: 48px; aspect-ratio: 1; }
.testimonial-name { margin: 0; font-weight: 700; }
.testimonial-position { margin: 0; font-size: var(--fs-small); color: var(--text-light); }
@media (min-width: 640px) { .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .testimonials-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .variant-grid-2 .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.team-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); }
.team-card { text-align: center; }
.team-image { width: 120px; height: 120px; margin: 0 auto var(--space-4); border-radius: 50%; overflow: hidden; }
.team-image .image-gallery { display: block; }
.team-image .gallery-image-wrapper { border-radius: 50%; }
.team-image .gallery-thumbnail { width: 120px; height: 120px; aspect-ratio: 1; }
.team-name { margin: 0 0 var(--space-1); font-size: var(--fs-h3); }
.team-position { margin: 0 0 var(--space-3); color: var(--primary-text, var(--primary)); font-weight: 600; font-size: var(--fs-small); }
.team-bio { margin: 0; color: var(--text-light); font-size: var(--fs-small); }
@media (min-width: 640px) { .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .variant-grid-4 .team-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process-steps { display: grid; gap: var(--space-5); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); counter-reset: step; }
.step-card { position: relative; padding-top: var(--space-8); }
.step-number {
position: absolute; top: calc(var(--space-4) * -1); left: var(--space-6); display: inline-flex; align-items: center; justify-content: center;
min-width: 44px; height: 44px; padding: 0 .6em; border-radius: 999px; background: var(--primary); color: #fff;
font-weight: 800; font-size: var(--fs-small); letter-spacing: .04em; box-shadow: 0 8px 20px var(--primary-glow);
}
.step-icon { margin-bottom: var(--space-2); font-size: 1.4rem; }
.step-title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.step-description { margin: 0; color: var(--text-light); }
@media (min-width: 640px) { .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .process-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .variant-grid-3 .process-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .variant-grid-2 .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pricing-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); align-items: stretch; }
.pricing-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.pricing-card.featured { border-color: var(--primary); box-shadow: 0 16px 40px var(--primary-glow); }
.pricing-badge {
position: absolute; top: calc(var(--space-3) * -1); right: var(--space-4); padding: .35em .9em; border-radius: 999px;
background: var(--primary); color: #fff; font-size: var(--fs-small); font-weight: 700;
}
.pricing-name { margin: 0; font-size: var(--fs-h3); }
.pricing-price { display: flex; align-items: baseline; gap: .3em; }
.price-amount { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); font-weight: 900; color: var(--primary-text, var(--primary)); letter-spacing: -.02em; }
.price-period { color: var(--text-light); font-size: var(--fs-small); }
.pricing-description { margin: 0; color: var(--text-light); }
.pricing-features { display: grid; gap: var(--space-2); margin: var(--space-2) 0; }
.pricing-features li { position: relative; padding-left: 1.6em; }
.pricing-features li::before { content: "✓"; position: absolute; left: 0; color: var(--primary-text, var(--primary)); font-weight: 800; }
.pricing-card .btn { margin-top: auto; }
@media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .pricing-card.featured { transform: translateY(-8px); } }
.faq-list { display: grid; gap: var(--space-3); max-width: 820px; margin-inline: auto; }
.faq-item { padding: 0; overflow: hidden; }
.faq-question {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
padding: var(--space-4) var(--space-5); font-weight: 700; cursor: pointer; user-select: none;
}
.faq-question:hover { color: var(--primary-text, var(--primary)); }
.faq-toggle {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
background: var(--primary-glow); color: var(--primary-text, var(--primary)); font-weight: 800; transition: transform .25s ease;
}
.faq-item.active .faq-toggle { transform: rotate(45deg); }
.faq-answer { padding: 0 var(--space-5) var(--space-5); color: var(--text-light); border-top: 1px solid var(--border); padding-top: var(--space-4); }
.contact-grid { display: grid; gap: var(--space-6); }
.contact-info { display: grid; gap: var(--space-3); align-content: start; }
.contact-item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0; }
.contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--primary-glow); color: var(--primary-text, var(--primary)); font-size: 1.1rem; }
.contact-label { font-weight: 700; }
.contact-value { color: var(--text-light); }
.contact-value a { color: var(--text); font-weight: 600; }
.contact-opening-hours, .contact-social { margin-top: var(--space-2); color: var(--text-light); font-size: var(--fs-small); }
.contact-social .uf-list { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.contact-form { display: block; }
.form-title { margin: 0 0 var(--space-4); font-size: var(--fs-h3); }
.styled-form { display: grid; gap: var(--space-4); }
.form-group { display: grid; gap: var(--space-1); }
.form-label { font-size: var(--fs-small); font-weight: 600; color: var(--text-light); }
.form-control {
width: 100%; min-height: 48px; padding: .75em 1em; border: 1px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); color: var(--text); font: inherit; transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
textarea.form-control { min-height: 130px; resize: vertical; }
.checkbox-label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--fs-small); }
.message-alert { padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--background-alt); font-weight: 600; }
.message-alert.error { color: var(--danger); background: rgba(198, 40, 57, .08); }
.message-alert.success { color: var(--success); background: rgba(14, 138, 110, .08); }
.contact-map { margin-top: var(--space-6); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.contact-map iframe { width: 100%; min-height: 300px; border: 0; }
@media (min-width: 1024px) {
.contact-grid { grid-template-columns: 1fr 1.2fr; gap: var(--space-8); }
.variant-split .contact-grid { grid-template-columns: 1fr 1fr; }
}
.component-cta.section { background: var(--primary); color: #fff; }
.component-cta.section .section-title, .component-cta.section .cta-title { color: var(--field-title-color, #fff); }
.component-cta.section .section-subtitle, .component-cta.section .cta-subtitle, .component-cta.section .cta-description { color: var(--field-subtitle-color, rgba(255,255,255,.85)); }
.cta-content { display: grid; gap: var(--space-3); max-width: 760px; margin-inline: auto; }
.cta-description { margin: 0; font-size: var(--fs-lead); }
.cta-buttons { margin-top: var(--space-4); }
.text-center .cta-buttons { justify-content: center; }
.component-cta.section .btn, .component-cta.section .cta-buttons a { background: var(--btn-bg, #fff); color: var(--btn-color, var(--primary)); }
.component-cta.section .btn-outline { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.banner-strip { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); }
.banner-strip-inner { flex: 1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.banner-strip-text { font-weight: 600; }
.banner-strip-link { font-weight: 800; text-decoration: underline; }
.banner-strip-close { flex: 0 0 auto; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 1rem; cursor: pointer; }
.phone-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-3) var(--space-5); text-align: center; }
.phone-strip-icon { font-size: 1.6rem; color: var(--primary-text, var(--primary)); }
.phone-strip-title { font-weight: 800; font-size: var(--fs-lead); }
.phone-strip-btn { font-size: var(--fs-lead); }
.phone-strip-note { width: 100%; color: var(--text-light); font-size: var(--fs-small); }
@media (min-width: 640px) { .phone-strip-note { width: auto; } }
.guarantee-wrapper { display: grid; gap: var(--space-5); }
.guarantee-main { display: grid; gap: var(--space-3); justify-items: center; text-align: center; padding: var(--space-8) var(--space-6); }
.guarantee-icon { display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; border-radius: 50%; background: var(--primary-glow); color: var(--primary-text, var(--primary)); font-size: 2rem; }
.guarantee-title { margin: 0; font-size: var(--fs-h3); }
.guarantee-desc { margin: 0; max-width: 60ch; color: var(--text-light); }
.guarantee-badges { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--mobile-columns, 1), minmax(0, 1fr)); }
.guarantee-badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; padding: var(--space-5); }
.guarantee-badge-icon { font-size: 1.5rem; color: var(--primary-text, var(--primary)); }
.guarantee-badge small { color: var(--text-light); }
@media (min-width: 640px) { .guarantee-badges { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .guarantee-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.blog-card { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.blog-image .gallery-image-wrapper { border-radius: 0; }
.blog-image .gallery-thumbnail { aspect-ratio: 16 / 10; }
.blog-content { display: grid; gap: var(--space-2); padding: var(--space-5); }
.blog-date { font-size: var(--fs-small); color: var(--text-lighter); }
.blog-title { margin: 0; font-size: var(--fs-h3); }
.blog-excerpt { margin: 0; color: var(--text-light); }
.blog-content .btn { justify-self: start; margin-top: var(--space-2); }
.clients-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--mobile-columns, 2), minmax(0, 1fr)); align-items: center; }
.client-item { display: flex; align-items: center; justify-content: center; min-height: 90px; padding: var(--space-4); }
.client-item .gallery-image-wrapper { border-radius: 0; box-shadow: none; }
.client-item .gallery-thumbnail { aspect-ratio: auto; max-height: 56px; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: var(--transition); }
.client-item:hover .gallery-thumbnail { filter: none; opacity: 1; }
.client-name { font-weight: 700; color: var(--text-light); }
@media (min-width: 640px) { .clients-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .clients-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.timeline { position: relative; display: grid; gap: var(--space-5); padding-left: var(--space-8); }
.timeline::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 2px; background: var(--border); }
.timeline-item { position: relative; }
.timeline-item::before { content: ""; position: absolute; left: calc(var(--space-8) * -1 + 4px); top: var(--space-6); width: 16px; height: 16px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
.timeline-year { margin-bottom: var(--space-1); font-weight: 800; color: var(--primary-text, var(--primary)); }
.timeline-title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.timeline-description { margin: 0; color: var(--text-light); }
.video-container { padding: 0; overflow: hidden; }
.video-embed, .video-iframe { width: 100%; }
.video-iframe { aspect-ratio: 16 / 9; height: auto; border: 0; }
.video-embed iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }
.video-tiktok { aspect-ratio: 9 / 16; max-width: 420px; margin-inline: auto; }
.video-caption { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-light); }
.video-url-error { padding: var(--space-4); color: var(--danger); }
.map-container { padding: 0; overflow: hidden; }
.map-container iframe { width: 100%; min-height: 320px; border: 0; }
.map-caption { padding: var(--space-3) var(--space-4); font-size: var(--fs-small); color: var(--text-light); }
.map-embed { min-height: var(--map-h, 320px); display: grid; place-items: center; padding: var(--space-6); background: var(--background-alt); background-image: radial-gradient(var(--border) 1px, transparent 1px); background-size: 18px 18px; border-radius: var(--radius); }
.map-embed.is-loaded { display: block; padding: 0; background: none; overflow: hidden; }
.map-embed iframe { display: block; width: 100%; border: 0; }
.map-embed-inner { display: grid; gap: var(--space-3); justify-items: center; text-align: center; max-width: 42ch; }
.map-embed-address { margin: 0; font-weight: 700; }
.map-embed-address i { color: var(--primary-text, var(--primary)); margin-right: .4em; }
.map-embed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); }
.map-embed-note { margin: 0; font-size: var(--fs-small); color: var(--text-lighter); }
body :is(.look-dark, .on-dark, .variant-dark) .map-embed:not(.is-loaded) { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12); }
.site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); backdrop-filter: blur(10px); }
.header-content { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); max-width: var(--container-width); min-height: 64px; margin-inline: auto; padding: var(--space-2) var(--container-px); }
.logo .image-gallery { display: block; }
.logo .gallery-image-wrapper { border-radius: 0; box-shadow: none; }
.logo .gallery-thumbnail { width: auto; height: 40px; aspect-ratio: auto; object-fit: contain; }
.site-title { font-weight: 900; font-size: 1.15rem; letter-spacing: -.01em; }
.main-nav { display: flex; align-items: center; }
.mobile-menu-toggle { display: inline-flex; flex-direction: column; gap: 5px; width: 44px; height: 44px; padding: 10px; border: 0; background: transparent; cursor: pointer; }
.mobile-menu-toggle span { display: block; height: 2px; background: var(--text); border-radius: 2px; }
.nav-menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; padding: var(--space-3) var(--container-px); background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); }
.nav-menu.active, body.nav-open .nav-menu { display: flex; }
.nav-item { list-style: none; }
.nav-link { display: block; padding: var(--space-3) 0; font-weight: 600; color: var(--text); }
.nav-link:hover { color: var(--primary-text, var(--primary)); text-decoration: none; }
.header-cta { display: none; }
@media (min-width: 1024px) {
.mobile-menu-toggle { display: none; }
.nav-menu { display: flex; position: static; flex-direction: row; gap: var(--space-6); padding: 0; background: transparent; border: 0; box-shadow: none; }
.nav-link { padding: var(--space-2) 0; }
.header-cta { display: block; }
}
.header-right { display: flex; align-items: center; gap: var(--space-4); }
.mobile-menu-toggle span { transition: transform .25s ease, opacity .2s ease; }
.mobile-menu-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
.mobile-menu-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 1024px) {
.variant-centered .header-content { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-bottom: 0; }
.variant-centered .logo, .variant-centered .site-title { grid-column: 2; grid-row: 1; justify-self: center; }
.variant-centered .header-right { grid-column: 3; grid-row: 1; justify-self: end; }
.variant-centered .main-nav { grid-column: 1 / -1; grid-row: 2; justify-content: center; margin-top: var(--space-2); padding-block: var(--space-1); border-top: 1px solid var(--border); }
.variant-split .main-nav, .variant-split .nav-menu { display: contents; }
.variant-split .header-content { justify-content: center; gap: var(--space-6); }
.variant-split .nav-item { order: 0; }
.variant-split .nav-item.nav-item-r { order: 2; }
.variant-split .logo, .variant-split .site-title { order: 1; margin-inline: var(--space-4); }
.variant-split .header-right { order: 3; margin-left: auto; }
.variant-topbar .header-content { display: grid; grid-template-columns: auto 1fr; align-items: center; padding-top: 0; row-gap: var(--space-2); }
.variant-topbar .header-right { grid-column: 1 / -1; grid-row: 1; justify-content: flex-end; margin-inline: calc(-1 * var(--container-px)); padding: 5px var(--container-px); font-size: .86rem; background: var(--background-alt); border-bottom: 1px solid var(--border); }
.variant-topbar .header-right .btn { padding: 4px 12px; font-size: .8rem; }
.variant-topbar .logo, .variant-topbar .site-title { grid-row: 2; }
.variant-topbar .main-nav { grid-row: 2; justify-content: flex-end; }
}
.variant-floating .site-header { background: transparent; border-bottom: 0; backdrop-filter: none; -webkit-backdrop-filter: none; padding-top: 10px; }
.variant-floating .header-content { position: relative; max-width: calc(var(--container-width) - 2 * var(--container-px)); min-height: 56px; padding-inline: var(--space-4) var(--space-3); border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface) 84%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow-md); }
.variant-floating .nav-menu { top: calc(100% + 8px); left: var(--container-px); right: var(--container-px); border: 1px solid var(--border); border-radius: var(--radius-lg, 16px); }
@media (min-width: 1024px) { .variant-floating .nav-menu { border: 0; border-radius: 0; } }
.variant-minimal .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; }
.variant-minimal .mobile-menu-toggle { display: inline-flex; position: relative; z-index: 201; }
.variant-minimal .main-nav { order: 3; }
.variant-minimal .header-cta { display: block; }
.variant-minimal .nav-menu { display: none; position: fixed; inset: 0; z-index: 200; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); padding: var(--space-8); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 0; box-shadow: none; }
.variant-minimal .nav-menu.nav-open { display: flex; }
.variant-minimal .nav-link { font-size: clamp(1.6rem, 4vw, 2.8rem); font-weight: 800; letter-spacing: -.01em; padding: var(--space-2) var(--space-4); }
.variant-minimal .nav-menu .nav-link.is-active { border-left: 0; padding-left: var(--space-4); }
.variant-minimal .nav-menu.nav-open .nav-item { animation: navFadeUp .45s cubic-bezier(.2,.7,.2,1) both; }
.variant-minimal .nav-menu.nav-open .nav-item:nth-child(2) { animation-delay: .05s; } .variant-minimal .nav-menu.nav-open .nav-item:nth-child(3) { animation-delay: .1s; } .variant-minimal .nav-menu.nav-open .nav-item:nth-child(4) { animation-delay: .15s; } .variant-minimal .nav-menu.nav-open .nav-item:nth-child(5) { animation-delay: .2s; } .variant-minimal .nav-menu.nav-open .nav-item:nth-child(6) { animation-delay: .25s; } .variant-minimal .nav-menu.nav-open .nav-item:nth-child(7) { animation-delay: .3s; }
@keyframes navFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .variant-minimal .nav-menu.nav-open .nav-item { animation: none; } .mobile-menu-toggle span { transition: none; } }
.nav-menu { --nav-active: var(--primary-text, var(--primary)); }
.nav-link { position: relative; transition: color .2s ease; }
.nav-link.is-active { color: var(--nav-active); }
.nav-active-underline .nav-link::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 2px; border-radius: 2px; background: var(--nav-active); transform: scaleX(0); transform-origin: left; transition: transform .28s cubic-bezier(.2,.7,.2,1); }
.nav-active-underline .nav-link:hover::after { transform: scaleX(.45); }
.nav-active-underline .nav-link.is-active::after { transform: scaleX(1); }
.nav-active-pill .nav-link { padding-inline: .8em; border-radius: 999px; transition: color .2s ease, background-color .25s ease, box-shadow .25s ease; }
.nav-active-pill .nav-link:hover { background: color-mix(in srgb, var(--nav-active) 10%, transparent); }
.nav-active-pill .nav-link.is-active { background: var(--nav-active); color: var(--btn-color, #fff); box-shadow: 0 6px 18px -8px var(--nav-active); }
.nav-active-dot .nav-link::after { content: ''; position: absolute; left: 50%; bottom: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--nav-active); transform: translate(-50%, 6px) scale(0); opacity: 0; transition: transform .28s cubic-bezier(.34,1.56,.64,1), opacity .2s ease; }
.nav-active-dot .nav-link.is-active::after { transform: translate(-50%, 0) scale(1); opacity: 1; }
.nav-active-topline .nav-link::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--nav-active); transform: scaleY(0); transform-origin: top; transition: transform .22s ease; }
.nav-active-topline .nav-link.is-active::before { transform: scaleY(1); }
.nav-active-glow .nav-link { padding-inline: .7em; border-radius: var(--radius-sm, 8px); transition: color .2s ease, background-color .25s ease; }
.nav-active-glow .nav-link.is-active { background: color-mix(in srgb, var(--nav-active) 12%, transparent); }
.nav-active-glow .nav-link:hover { background: color-mix(in srgb, var(--nav-active) 7%, transparent); }
.nav-active-bracket .nav-link::before, .nav-active-bracket .nav-link::after { position: absolute; top: 50%; transform: translateY(-50%); font-weight: 400; color: var(--nav-active); opacity: 0; transition: opacity .2s ease, transform .25s ease; }
.nav-active-bracket .nav-link::before { content: '['; left: -.55em; transform: translate(4px, -50%); }
.nav-active-bracket .nav-link::after { content: ']'; right: -.55em; transform: translate(-4px, -50%); }
.nav-active-bracket .nav-link.is-active::before, .nav-active-bracket .nav-link.is-active::after { opacity: 1; transform: translate(0, -50%); }
.nav-active-bold .nav-link.is-active { font-weight: 800; }
@media (max-width: 1023.98px) {
.nav-menu .nav-link.is-active { padding-left: 12px; border-left: 3px solid var(--nav-active); }
.nav-active-underline .nav-link::after, .nav-active-dot .nav-link::after, .nav-active-topline .nav-link::before, .nav-active-bracket .nav-link::before, .nav-active-bracket .nav-link::after { display: none; }
.nav-active-pill .nav-link.is-active { background: transparent; color: var(--nav-active); box-shadow: none; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) { .nav-link, .nav-link::before, .nav-link::after { transition: none; } }
.site-footer { margin-top: auto; padding: var(--space-12) 0 var(--space-6); background: var(--dark-bg); color: var(--dark-text); }
.footer-grid { display: grid; gap: var(--space-6); max-width: var(--container-width); margin-inline: auto; padding-inline: var(--container-px); }
.footer-logo .gallery-image-wrapper { border-radius: 0; box-shadow: none; }
.footer-logo .gallery-thumbnail { width: auto; height: 40px; aspect-ratio: auto; object-fit: contain; }
.footer-brand p { margin: 0; color: rgba(255,255,255,.7); max-width: 40ch; }
.footer-links a, .footer-bottom-links a { color: rgba(255,255,255,.8); }
.footer-bottom-links { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-links .uf-list, .footer-bottom-links .uf-list, .footer-social .uf-list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer-contact { color: rgba(255,255,255,.75); font-size: var(--fs-small); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); max-width: var(--container-width); margin: var(--space-8) auto 0; padding: var(--space-5) var(--container-px) 0; border-top: 1px solid rgba(255,255,255,.12); font-size: var(--fs-small); color: rgba(255,255,255,.6); }
.footer-bottom p { margin: 0; }
.auto-footer { padding: var(--space-8) var(--container-px); text-align: center; font-size: var(--fs-small); color: var(--text-light); border-top: 1px solid var(--border); }
.auto-footer p { margin: 0 0 var(--space-1); }
.auto-footer-credit a { font-weight: 700; }
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-name { display: block; margin-bottom: var(--space-2); font-family: var(--font-heading, inherit); font-weight: 700; font-size: 1.1rem; }
.countdown-container { text-align: center; }
.countdown-wrap { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-2); margin: var(--space-6) 0; }
.countdown-item { display: grid; gap: var(--space-1); min-width: 72px; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); }
.countdown-num { font-size: clamp(1.6rem, 1rem + 2vw, 2.4rem); font-weight: 900; line-height: 1; color: var(--primary-text, var(--primary)); font-variant-numeric: tabular-nums; }
.countdown-label { font-size: var(--fs-small); color: var(--text-light); text-transform: uppercase; letter-spacing: .06em; }
.countdown-sep { font-size: 1.6rem; font-weight: 900; color: var(--text-lighter); }
.countdown-expired { font-weight: 700; color: var(--text-light); }
.newsletter-container { max-width: 640px; margin-inline: auto; text-align: center; }
.newsletter-desc { color: var(--text-light); }
.newsletter-form { display: grid; gap: var(--space-3); }
.newsletter-input-wrap { display: grid; gap: var(--space-2); }
.newsletter-input { min-height: 48px; padding: .75em 1em; border: 1px solid var(--border); border-radius: var(--radius-sm); font: inherit; }
.newsletter-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-glow); }
.newsletter-privacy { margin: 0; font-size: var(--fs-small); color: var(--text-lighter); }
.newsletter-success { padding: var(--space-4); border-radius: var(--radius-sm); background: rgba(14,138,110,.1); color: var(--success); font-weight: 700; }
@media (min-width: 640px) { .newsletter-input-wrap { grid-template-columns: 1fr auto; } }
.comparison-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); }
.comparison-table { width: 100%; min-width: 480px; border-collapse: collapse; background: var(--surface); }
.comparison-table th, .comparison-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border); }
.comparison-table th { font-size: var(--fs-small); text-transform: uppercase; letter-spacing: .05em; color: var(--text-light); background: var(--background-alt); }
.comparison-table .comp-col1, .comparison-table .comp-col2 { text-align: center; width: 22%; }
.comparison-table .comp-highlight { background: var(--primary-glow); }
.comparison-table th.comp-highlight { color: var(--primary-text, var(--primary)); }
.comp-yes { color: var(--success); } .comp-no { color: var(--text-lighter); }
.comparison-cta { margin-top: var(--space-6); text-align: center; }
.generic-text { max-width: 70ch; color: var(--text-light); }
.generic-image { margin-block: var(--space-4); }
.generic-items { display: grid; gap: var(--space-4); }
.generic-extra { margin-top: var(--space-4); }
.uf-text { margin: 0; color: var(--text-light); }
.uf-inline { display: inline; }
.uf-pair { display: inline-flex; align-items: center; gap: .4em; }
.uf-pair-icon { color: var(--primary-text, var(--primary)); }
.uf-link { font-weight: 600; }
.uf-video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--radius-sm); }
.uf-image { border-radius: var(--radius-sm); }
.uf-item { display: flex; gap: var(--space-3); align-items: flex-start; }
.uf-icon { flex: 0 0 auto; color: var(--primary-text, var(--primary)); font-size: 1.2rem; }
.uf-item-body { display: grid; gap: var(--space-1); }
.uf-item-body p { margin: 0; color: var(--text-light); font-size: var(--fs-small); }
.uf-list { display: grid; gap: var(--space-2); }
.uf-block { display: grid; gap: var(--space-2); }
.uf-bool { font-weight: 800; }
.component-mzreviews.section { background: var(--background-alt); border-top: 1px solid var(--border); }
.mzr-head { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.mzr-head .section-title { margin-bottom: 0; }
.mzr-summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); color: var(--text-light); font-size: var(--fs-small); }
.mzr-summary strong { font-size: 1.15rem; color: var(--text); }
.mzr-link { font-weight: 700; color: var(--primary-text, var(--primary)); }
.mzr-stars { display: inline-flex; gap: 2px; color: #E9A21B; font-size: .95rem; }
.mzr-stars .is-off { color: var(--border); }
.mzr { position: relative; }
.mzr-track {
display: grid; grid-auto-flow: column; grid-auto-columns: min(100%, 340px); gap: var(--space-4);
overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding: 2px 2px var(--space-3);
scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.mzr-track:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.mzr-card {
display: flex; flex-direction: column; gap: var(--space-3); min-height: 100%; padding: var(--space-5);
background: var(--card-bg, var(--surface)); border: var(--card-border, 1px solid var(--border)); border-radius: var(--card-radius, var(--radius));
box-shadow: var(--card-shadow, var(--shadow-sm)); scroll-snap-align: start;
}
.mzr-top { display: grid; gap: 4px; }
.mzr-meta { font-size: var(--fs-small); color: var(--text-light); }
.mzr-body { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--text); }
.mzr-body::before { content: "\201E"; } .mzr-body::after { content: "\201D"; }
.mzr-reply { margin-top: auto; padding: var(--space-3) var(--space-4); border-left: 3px solid var(--primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--primary-glow); font-size: var(--fs-small); }
.mzr-reply b { display: block; margin-bottom: 4px; }
.mzr-reply p { margin: 0; color: var(--text); }
.mzr-nav {
position: absolute; top: 50%; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-top: -22px;
border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); cursor: pointer; transition: opacity .15s, transform .15s;
}
.mzr-nav[hidden] { display: none; }
.mzr-nav:hover { transform: scale(1.06); }
.mzr-nav:disabled { opacity: .35; cursor: default; transform: none; }
.mzr-prev { left: -14px; } .mzr-next { right: -14px; }
.mzr-note { margin: var(--space-4) 0 0; font-size: var(--fs-small); color: var(--text-lighter); max-width: 70ch; }
@media (max-width: 639.98px) {
.mzr-track { grid-auto-columns: 86%; }
.mzr-prev { left: -6px; } .mzr-next { right: -6px; }
}
.theme-dark .mzr-stars .is-off, html[data-visitor-theme="dark"] .mzr-stars .is-off { color: rgba(255, 255, 255, .18); }
.fbx { display: grid; gap: var(--space-6); }
.fbx .section-title { margin-bottom: 0; }
.fbx-page { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); padding: var(--space-4) 0; border-block: 1px solid var(--border); }
.fbx-page-pic { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--background-alt); }
.fbx-page-pic.is-icon { display: inline-flex; align-items: center; justify-content: center; background: #1877F2; color: #fff; font-size: 1.5rem; }
.fbx-page-info { display: grid; gap: 2px; min-width: 0; flex: 1 1 220px; }
.fbx-page-name { font-size: 1.1rem; line-height: var(--lh-snug); color: var(--text); }
.fbx-page-meta { font-size: var(--fs-small); color: var(--text-light); }
.fbx-page-about { margin: var(--space-2) 0 0; color: var(--text-light); max-width: 62ch; }
.fbx-page-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.fbx-page-actions .btn { white-space: nowrap; }
.fbx-page.is-large { padding: var(--space-6); border: 0; border-radius: var(--radius-lg); background: var(--background-alt); }
.fbx-page.is-large .fbx-page-pic { width: 88px; height: 88px; }
.fbx-page.is-large .fbx-page-name { font-size: var(--fs-h3); }
@media (max-width: 639.98px) {
.fbx-page-actions { flex: 1 1 100%; }
.fbx-page-actions .btn { flex: 1 1 auto; justify-content: center; }
}
.fbx-feed { display: grid; grid-template-columns: 1fr; gap: var(--space-8) var(--space-6); }
@media (min-width: 640px) { .fbx-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
.fbx-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fbx-feed .fbx-post.is-lead { grid-column: span 2; grid-row: span 2; }
.fbx-feed .fbx-post.is-lead .fbx-post-media { aspect-ratio: 4 / 3; }
.fbx-feed .fbx-post.is-lead .fbx-post-text { -webkit-line-clamp: 7; font-size: 1.12rem; }
}
.fbx-post { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.fbx-post-media { position: relative; display: block; overflow: hidden; aspect-ratio: 1 / 1; border-radius: var(--radius); background: var(--background-alt); }
.fbx-post-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
a.fbx-post-media:hover img { transform: scale(1.035); }
a.fbx-post-media:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px; }
.fbx-play { position: absolute; inset: 50% auto auto 50%; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: rgba(10, 14, 24, .62); color: #fff; font-size: 1.1rem; backdrop-filter: blur(4px); }
.fbx-post-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.fbx-date { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lighter); }
.fbx-post-text { margin: 0; color: var(--text); line-height: var(--lh-body); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; overflow-wrap: anywhere; }
.fbx-post-text a { color: var(--primary-text, var(--primary)); }
.fbx-tag { color: var(--primary-text, var(--primary)); font-weight: 600; }
.fbx-post.is-text .fbx-post-body { padding: var(--space-6); border-radius: var(--radius); background: var(--background-alt); }
.fbx-post.is-text .fbx-post-text { font-size: 1.1rem; -webkit-line-clamp: 8; }
.fbx-post-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: auto; padding-top: var(--space-2); }
.fbx-counts { display: inline-flex; flex-wrap: wrap; gap: var(--space-3); font-size: var(--fs-small); color: var(--text-light); font-variant-numeric: tabular-nums; }
.fbx-counts i { color: var(--text-lighter); margin-right: 2px; }
.fbx-post-link { font-size: var(--fs-small); font-weight: 700; color: var(--primary-text, var(--primary)); text-decoration: none; white-space: nowrap; }
.fbx-post-link i { font-size: .8em; transition: transform .2s; }
.fbx-post-link:hover i { transform: translateX(3px); }
.fbx-featured { display: grid; gap: var(--space-8); align-items: start; }
@media (min-width: 1024px) { .fbx-featured { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-12); } }
.fbx-featured .fbx-post-media { aspect-ratio: 4 / 3; }
.fbx-featured .fbx-post-text { -webkit-line-clamp: unset; display: block; font-size: 1.05rem; }
.fbx-thread { display: grid; gap: var(--space-4); }
.fbx-thread-title { margin: 0; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.fbx-thread-title span { color: var(--text-lighter); font-weight: 600; }
.fbx-comments, .fbx-replies { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
.fbx-comment, .fbx-reply { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.fbx-avatar { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: hsl(var(--h, 215) 42% 46%); color: #fff; font-size: .78rem; font-weight: 700; letter-spacing: .02em; }
.fbx-comment-body { min-width: 0; }
.fbx-comment-body > p { margin: 4px 0 0; padding: var(--space-3) var(--space-4); border-radius: 4px var(--radius) var(--radius) var(--radius); background: var(--background-alt); color: var(--text); line-height: 1.5; overflow-wrap: anywhere; }
.fbx-comment-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--space-2); font-size: var(--fs-small); }
.fbx-comment-head strong { color: var(--text); }
.fbx-comment-head time { color: var(--text-lighter); }
.fbx-likes { display: inline-block; margin-top: 4px; font-size: .78rem; color: var(--text-lighter); }
.fbx-replies { margin-top: var(--space-3); }
.fbx-reply.is-page .fbx-comment-body > p { background: var(--primary-glow); border-left: 3px solid var(--primary); border-radius: 0 var(--radius) var(--radius) var(--radius); }
.fbx-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--primary); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fbx-empty { margin: 0; color: var(--text-light); }
.fbx-thread-cta { justify-self: start; }
.fbx-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding-top: var(--space-5); border-top: 1px solid var(--border); }
.fbx-share-label { margin-right: var(--space-2); font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-lighter); }
.fbx-share-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--text); font: inherit; font-size: var(--fs-small); font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.fbx-share-btn:hover { border-color: var(--primary); color: var(--primary-text, var(--primary)); }
.fbx-share-btn:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
.fbx-share-btn[hidden] { display: none; }
.fbx-share-btn.is-done { border-color: var(--success); color: var(--success); }
@media (hover: hover) and (pointer: fine) { .fbx-only-touch { display: none; } }
.fbx-editor-note { margin: 0; padding: var(--space-3) var(--space-4); border: 1px dashed var(--border); border-radius: var(--radius-sm); color: var(--text-light); font-size: var(--fs-small); }
@media (prefers-reduced-motion: reduce) {
.fbx-post-media img, .fbx-post-link i { transition: none; }
a.fbx-post-media:hover img { transform: none; }
}
h1, h2, h3, .section-title, .hero-title { font-family: var(--section-heading-font, var(--font-heading, var(--section-font, inherit))); }
.btn-link, .btn-group a.btn-link, .section-cta a.btn-link, .hero-cta-group a.btn-link, .about-cta a.btn-link {
min-height: 0; padding: .25em 0; border: 0; border-bottom: 2px solid currentColor; border-radius: 0;
background: transparent; color: var(--primary-text, var(--primary)); font-weight: 700; box-shadow: none;
}
.btn-link::after { content: "\2192"; margin-left: .35em; transition: transform .2s; }
.btn-link:hover { transform: none; box-shadow: none; }
.btn-link:hover::after { transform: translateX(4px); }
@media (min-width: 1024px) {
.variant-side .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.variant-side .container > .section-eyebrow, .variant-side .container > .section-title, .variant-side .container > .section-subtitle,
.variant-side .container > .section-description, .variant-side .container > .section-cta { grid-column: 1; }
.variant-side .container > .section-title { font-size: calc(var(--fs-h2) * var(--heading-scale) * 1.15); }
.variant-side .container > .section-subtitle { margin-bottom: var(--space-4); }
.variant-side .container > .section-cta { margin-top: var(--space-4); }
.variant-side .container > :not(.section-eyebrow):not(.section-title):not(.section-subtitle):not(.section-description):not(.section-cta):not(style) { grid-column: 2; grid-row: 1 / span 6; }
.variant-side .grid-3, .variant-side .grid-4, .variant-side .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-side .process-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-side .testimonials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-side .faq-list { max-width: none; }
.variant-side .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.variant-side .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.section-description { max-width: 60ch; margin: 0 0 var(--space-6); color: var(--text-light); }
.component-hero.variant-cover { position: relative; overflow: hidden; color: #fff; min-height: min(78vh, 720px); display: flex; align-items: center; }
.component-hero.variant-cover .container { position: static; }
.component-hero.variant-cover .hero-content { position: relative; z-index: 2; }
body .component-hero.variant-cover { --section-text-color: #fff; --heading-color: #fff; --text-light: rgba(255, 255, 255, .86); }
body .component-contact.variant-dark { --section-text-color: #fff; --heading-color: #fff; }
.hero-cover { position: absolute; inset: 0; z-index: 0; }
.hero-cover-img { width: 100%; height: 100%; object-fit: cover; }
.hero-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(10, 14, 24, .82) 0%, rgba(10, 14, 24, .55) 45%, rgba(10, 14, 24, .15) 100%); }
.variant-cover .hero-content { grid-template-columns: 1fr; }
.variant-cover .hero-text { max-width: 640px; }
.variant-cover .hero-pre-title { background: rgba(255, 255, 255, .14); color: #fff; }
.variant-cover .hero-title, .variant-cover .hero-subtitle, .variant-cover .hero-description { color: #fff; }
.variant-cover .hero-description { color: rgba(255, 255, 255, .85); }
.variant-cover .btn-outline, .variant-cover .hero-cta-group a.btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); }
.variant-cover .btn-outline:hover, .variant-cover .hero-cta-group a.btn-outline:hover { background: #fff; color: var(--text); }
.hero-tagline { display: block; margin-top: var(--space-6); font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: clamp(1.3rem, 1rem + 1.4vw, 2rem); color: var(--primary-text, var(--primary)); }
.variant-cover .hero-tagline { color: #fff; opacity: .9; }
@media (min-width: 1024px) {
.variant-cover .hero-tagline { position: absolute; right: var(--container-px); bottom: var(--space-8); margin: 0; transform: rotate(-4deg); }
.component-hero.variant-cover { min-height: min(86vh, 820px); }
}
.style-editorial .hero-pre-title, .style-clean .hero-pre-title { padding: 0; background: transparent; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; }
.style-editorial.theme-light .variant-split .hero-pre-title, .style-clean.theme-light .variant-split .hero-pre-title { color: var(--primary-text, var(--primary)); }
.component-trust.variant-strip.section { padding-block: var(--space-6); }
.trust-strip { display: grid; gap: var(--space-5); }
.trust-strip-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.trust-strip-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: var(--primary-text, var(--primary)); font-size: 1.5rem; }
.trust-strip-value { font-family: var(--font-heading, inherit); font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem); font-weight: 800; line-height: 1; color: var(--primary-text, var(--primary)); letter-spacing: -.02em; }
.trust-strip-body { display: flex; flex-direction: column; gap: 2px; }
.trust-strip-title { font-weight: 700; }
.trust-strip-desc { font-size: var(--fs-small); color: var(--text-light); }
@media (min-width: 640px) { .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
.trust-strip { grid-template-columns: repeat(var(--trust-cols, 4), minmax(0, 1fr)); gap: var(--space-8); }
.trust-strip-item + .trust-strip-item { padding-left: var(--space-8); border-left: 1px solid var(--border); }
}
@media (min-width: 640px) {
.variant-side .gallery-grid > .gallery-item:first-child, .variant-mosaic .gallery-grid > .gallery-item:first-child { grid-column: span 2; grid-row: span 2; }
.variant-side .gallery-grid > .gallery-item:first-child .gallery-image, .variant-mosaic .gallery-grid > .gallery-item:first-child .gallery-image { aspect-ratio: auto; height: 100%; }
.variant-side .gallery-grid .gallery-card-body, .variant-mosaic .gallery-grid .gallery-card-body { display: none; }
.variant-side .gallery-grid .gallery-overlay, .variant-mosaic .gallery-grid .gallery-overlay { opacity: 1; }
}
.variant-masonry .gallery-grid { display: block; columns: 2; column-gap: var(--space-4); }
.variant-masonry .gallery-item { break-inside: avoid; margin-bottom: var(--space-4); }
.variant-masonry .gallery-image { aspect-ratio: auto; }
@media (min-width: 1024px) { .variant-masonry .gallery-grid { columns: 3; } }
.style-editorial .step-card, .variant-side .step-card { padding-top: var(--space-5); background: transparent; border: 0; box-shadow: none; border-top: 2px solid var(--border); border-radius: 0; }
.style-editorial .step-number, .variant-side .step-number {
position: static; display: block; min-width: 0; height: auto; padding: 0; margin-bottom: var(--space-3); border-radius: 0;
background: transparent; box-shadow: none; color: var(--primary-text, var(--primary)); font-family: var(--font-heading, inherit); font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); font-weight: 800; letter-spacing: -.02em;
}
.style-editorial .step-card:hover, .variant-side .step-card:hover { transform: none; box-shadow: none; }
.style-editorial .service-card { padding: 0; background: transparent; border: 0; box-shadow: none; }
.style-editorial .service-card:hover { transform: none; box-shadow: none; }
.style-editorial .service-image .responsive-image { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); }
.style-editorial .service-icon { width: auto; height: auto; background: transparent; padding: 0; font-size: 1.5rem; }
.style-editorial .service-title { font-size: 1.2rem; }
.style-editorial .service-card::after { content: "\2192"; margin-top: auto; color: var(--primary-text, var(--primary)); font-size: 1.2rem; }
.about-quote { margin: var(--space-6) 0 0; padding: 0 0 0 var(--space-5); border-left: 3px solid var(--primary); }
.about-quote p { margin: 0 0 var(--space-3); font-family: var(--font-heading, inherit); font-size: var(--fs-lead); line-height: 1.5; color: var(--text); }
.about-quote footer { font-size: var(--fs-small); color: var(--text-light); }
.about-quote footer strong { display: block; color: var(--text); }
.about-content .section-eyebrow, .about-content .section-title { text-align: left; }
.about-content .section-subtitle { margin-bottom: var(--space-4); }
@media (min-width: 1024px) {
.variant-split-reverse .about-grid.with-image { grid-template-columns: 1fr 1fr; }
.variant-split-reverse .about-image-wrapper { order: 2; }
.about-img-wrapper .responsive-image { aspect-ratio: 5 / 6; }
.variant-split .about-img-wrapper .responsive-image, .variant-split-reverse .about-img-wrapper .responsive-image { aspect-ratio: 4 / 5; }
}
.contact-layout { display: grid; gap: var(--space-8); }
.contact-intro .section-subtitle { margin-bottom: var(--space-4); }
.contact-direct { display: grid; gap: var(--space-3); margin-top: var(--space-6); }
.contact-direct a, .contact-direct span { display: inline-flex; align-items: center; gap: var(--space-3); color: inherit; font-weight: 600; }
.contact-direct i { width: 22px; text-align: center; color: var(--primary-text, var(--primary)); }
.contact-promises { display: grid; gap: var(--space-4); }
.contact-promise { display: flex; gap: var(--space-3); align-items: flex-start; }
.contact-promise i { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--primary-glow); color: var(--primary-text, var(--primary)); }
.contact-promise strong { display: block; }
.contact-promise span { font-size: var(--fs-small); color: var(--text-light); }
.contact-hours { margin-top: var(--space-5); font-size: var(--fs-small); color: var(--text-light); white-space: pre-line; }
.component-contact .contact-form.card { padding: var(--space-6); }
@media (min-width: 1024px) {
.contact-layout { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, .8fr); gap: var(--space-10); align-items: start; }
.contact-layout.no-aside { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.contact-layout.no-form { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
}
.component-contact.variant-dark { position: relative; color: #fff; background: var(--dark-bg); }
.component-contact.variant-dark .section-title, .component-contact.variant-dark .section-subtitle, .component-contact.variant-dark .section-eyebrow { color: #fff; }
.component-contact.variant-dark .section-eyebrow { color: rgba(255, 255, 255, .8); background: rgba(255, 255, 255, .12); }
.component-contact.variant-dark .section-description, .component-contact.variant-dark .contact-promise span, .component-contact.variant-dark .contact-hours { color: rgba(255, 255, 255, .78); }
.component-contact.variant-dark .contact-direct i, .component-contact.variant-dark .contact-promise i { color: #fff; background: rgba(255, 255, 255, .14); }
.component-contact.variant-dark .contact-form.card { background: #fff; color: var(--dark-bg); border: 0; }
.component-contact.variant-dark .form-label { color: #4b5674; }
.component-contact.variant-dark .form-control { background: #fff; color: #15213b; border-color: #e2e7ef; }
.header-right { display: flex; align-items: center; gap: var(--space-4); }
.header-phone { display: none; align-items: center; gap: .5em; font-weight: 700; color: var(--text); white-space: nowrap; }
.header-phone i { color: var(--primary-text, var(--primary)); }
.header-phone:hover { text-decoration: none; color: var(--primary-text, var(--primary)); }
@media (min-width: 1024px) { .header-phone { display: inline-flex; } }
@media (max-width: 1023.98px) { .header-cta { display: block; } .header-cta .btn { min-height: 38px; padding: .5em .9em; font-size: var(--fs-small); } }
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.footer-nav a { color: rgba(255, 255, 255, .8); font-weight: 600; }
.footer-nav a:hover { color: #fff; text-decoration: none; }
.footer-social-links { display: flex; gap: var(--space-3); }
.footer-social-links a { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; }
.footer-social-links a:hover { background: #fff; color: var(--dark-bg); text-decoration: none; }
.variant-slim .footer-grid { grid-template-columns: 1fr; }
.style-editorial .section-eyebrow, .style-clean .section-eyebrow {
padding: 0; border-radius: 0; background: transparent; color: var(--primary-text, var(--primary)); font-size: .78rem; letter-spacing: .16em;
}
.style-editorial .section-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 2px; margin-right: .7em; vertical-align: middle; background: currentColor; }
.style-editorial .section-title { letter-spacing: -.02em; }
.style-editorial .card { box-shadow: none; }
.style-editorial .testimonial-quote { font-family: var(--font-heading, inherit); font-style: normal; font-size: var(--fs-lead); }
.style-editorial .stat-card { background: transparent; border: 0; border-top: 2px solid var(--border); border-radius: 0; text-align: left; padding: var(--space-5) 0 0; }
.style-editorial .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.style-editorial .faq-question { padding-inline: 0; }
.style-editorial .faq-answer { padding-inline: 0; border-top: 0; }
.style-bold .section-title { font-weight: 900; letter-spacing: -.03em; text-transform: uppercase; }
.style-bold .hero-title { font-weight: 900; letter-spacing: -.03em; }
.style-bold .section-eyebrow { border-radius: 0; }
.style-clean .card { border-color: transparent; box-shadow: var(--shadow-sm); }
@media (max-width: 639.98px) {
.header-content { gap: var(--space-2); }
.logo .gallery-thumbnail { max-width: min(48vw, 180px); height: 34px; }
.header-cta .btn { min-height: 34px; padding: .45em .8em; font-size: .8rem; white-space: nowrap; }
.style-bold .section-title { font-size: calc(var(--fs-h2) * var(--heading-scale) * .82); letter-spacing: -.01em; }
.style-bold .hero-title { font-size: calc(var(--fs-h1) * var(--heading-scale) * .85); }
.variant-side .container > .section-title { font-size: calc(var(--fs-h2) * var(--heading-scale)); }
.trust-strip-item + .trust-strip-item { padding-top: var(--space-4); border-top: 1px solid var(--border); }
}
@media (max-width: 399.98px) { .header-cta { display: none; } }
.component-header.section, .component-footer.section { padding: 0; }
.component-header.section .container, .component-footer.section .container { max-width: none; padding: 0; }
.component-header.section { position: sticky; top: 0; z-index: 100; }
.component-header.section + .section { border-top: 0; }
@media (max-width: 639.98px) {
.hero-cover::after { background: linear-gradient(180deg, rgba(10, 14, 24, .78) 0%, rgba(10, 14, 24, .66) 60%, rgba(10, 14, 24, .78) 100%); }
.variant-cover .hero-title, .variant-cover .hero-subtitle { text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
}
.style-soft { --shadow-sm: 0 6px 20px rgba(40, 30, 50, .06); --shadow-md: 0 16px 40px rgba(40, 30, 50, .09); }
.style-soft .section-eyebrow { background: var(--primary-glow); color: var(--primary-text, var(--primary)); letter-spacing: .04em; font-weight: 600; }
.style-soft .section-title, .style-soft .hero-title { letter-spacing: -.01em; font-weight: 700; }
.style-soft .card { border-color: transparent; box-shadow: var(--card-shadow, var(--shadow-sm)); }
.style-soft .responsive-image, .style-soft .gallery-image-wrapper, .style-soft .service-image .responsive-image { border-radius: var(--radius-lg); }
.style-soft .step-number { border-radius: 999px; }
.style-soft .btn:hover, .style-soft .btn-group a:hover, .style-soft .hero-cta-group a:hover { box-shadow: 0 10px 28px var(--primary-glow); }
.style-luxury { --heading-weight: 500; --shadow-sm: none; --shadow-md: 0 20px 50px rgba(0, 0, 0, .18); }
.style-luxury .section-eyebrow, .style-luxury .hero-pre-title {
padding: 0; border-radius: 0; background: transparent; color: var(--primary-text, var(--primary)); font-size: .72rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase;
}
.style-luxury .section-title, .style-luxury .hero-title { font-weight: 400; letter-spacing: .005em; }
.style-luxury .hero-title { font-size: calc(var(--fs-h1) * var(--heading-scale) * 1.12); line-height: 1.05; }
.style-luxury .section-subtitle { font-weight: 300; }
.style-luxury .card { background: transparent; border: 1px solid var(--border); box-shadow: none; }
.style-luxury .service-title, .style-luxury .step-title, .style-luxury .team-name, .style-luxury .pricing-name { font-weight: 500; }
.style-luxury .btn, .style-luxury .btn-group a, .style-luxury .hero-cta-group a, .style-luxury .section-cta a, .style-luxury .about-cta a, .style-luxury .cta-buttons a {
font-weight: 500; letter-spacing: .12em; text-transform: uppercase; font-size: .82rem; padding: 1em 1.9em;
}
.style-luxury .btn-link, .style-luxury .btn-group a.btn-link, .style-luxury .section-cta a.btn-link { padding-inline: 0; border-bottom-width: 1px; }
.style-luxury .section + .section { border-top-color: var(--border); }
.style-luxury .stat-number { font-weight: 400; }
.style-luxury .testimonial-quote { font-family: var(--font-heading, inherit); font-weight: 400; font-style: italic; }
.style-luxury .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; box-shadow: none; }
.style-luxury .step-number { background: transparent; border: 1px solid var(--primary); color: var(--primary-text, var(--primary)); }
.card-flat    { --card-shadow: none; --card-border: 1px solid transparent; }
.card-outline { --card-shadow: none; --card-border: 1px solid var(--border); }
.card-raised  { --card-shadow: var(--shadow-md); --card-border: 1px solid transparent; }
.card-glass   { --card-bg: rgba(255, 255, 255, .55); --card-border: 1px solid rgba(255, 255, 255, .6); --card-shadow: 0 10px 40px rgba(15, 20, 32, .10); }
.card-glass.theme-dark, .theme-dark .card-glass { --card-bg: rgba(255, 255, 255, .06); --card-border: 1px solid rgba(255, 255, 255, .12); }
.card-glass .card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.card-flat .service-card, .card-flat .step-card, .card-flat .testimonial-card, .card-flat .pricing-card, .card-flat .team-card, .card-flat .stat-card { box-shadow: none; }
.card-raised .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.btn-rounded { --btn-radius: 12px; }
.btn-square  { --btn-radius: 3px; }
.btn-pill    { --btn-radius: 999px; }
.btn-square .section-eyebrow, .btn-square .hero-pre-title { border-radius: 3px; }
.btn-pill .btn-link, .btn-pill .btn-group a.btn-link { border-radius: 0; }
.type-compact { --heading-scale: .88; }
.type-large   { --heading-scale: 1.14; }
.type-large .section-subtitle { font-size: calc(var(--fs-lead) * 1.06); }
@media (max-width: 639.98px) { .type-large { --heading-scale: 1.04; } }
.motion-none [data-animate], .motion-none [data-load-animate] { opacity: 1; transform: none; transition: none; }
.motion-none .btn:hover, .motion-none .btn-group a:hover, .motion-none .hero-cta-group a:hover, .motion-none .section-cta a:hover, .motion-none .card:hover, .motion-none .hover-lift:hover { transform: none; }
.motion-none .btn-link:hover::after { transform: none; }
.motion-subtle [data-animate="fade-up"] { transform: translateY(14px); }
.motion-subtle [data-animate="fade-down"] { transform: translateY(-14px); }
.motion-subtle [data-animate="fade-left"] { transform: translateX(14px); }
.motion-subtle [data-animate="fade-right"] { transform: translateX(-14px); }
.motion-subtle [data-animate="zoom-in"] { transform: scale(.97); }
.motion-subtle .card:hover, .motion-subtle .hover-lift:hover { transform: translateY(-2px); }
.motion-rich [data-animate="fade-up"] { transform: translateY(56px); }
.motion-rich [data-animate="fade-down"] { transform: translateY(-56px); }
.motion-rich [data-animate="zoom-in"] { transform: scale(.82); }
.motion-rich .card:hover, .motion-rich .hover-lift:hover { transform: translateY(-6px) scale(1.01); box-shadow: var(--shadow-lg); }
.motion-rich .btn:hover, .motion-rich .btn-group a:hover, .motion-rich .hero-cta-group a:hover { transform: translateY(-3px) scale(1.02); }
body :is(.section, .site-footer).look-alt { background: var(--background-alt); }
body :is(.section, .site-footer).look-dark {
background: var(--dark-bg); color: var(--dark-text);
--section-text-color: var(--dark-text); --heading-color: #fff; --text: var(--dark-text); --text-light: rgba(255, 255, 255, .72); --text-lighter: rgba(255, 255, 255, .5);
--border: rgba(255, 255, 255, .14); --surface: rgba(255, 255, 255, .06); --card-bg: rgba(255, 255, 255, .06); --card-border: 1px solid rgba(255, 255, 255, .12); --card-shadow: none;
--primary-text: var(--primary-on-dark, var(--primary));
}
body :is(.section, .site-footer).look-dark[style*="background-image"]::before { content: ""; position: absolute; inset: 0; background: rgba(10, 14, 24, .68); pointer-events: none; }
body :is(.section, .site-footer).look-dark > .container { position: relative; z-index: 1; }
body :is(.section, .site-footer).look-dark .section-title, body :is(.section, .site-footer).look-dark .hero-title, body :is(.section, .site-footer).look-dark h2, body :is(.section, .site-footer).look-dark h3 { color: var(--heading-color); }
body :is(.section, .site-footer).look-dark .section-subtitle, body :is(.section, .site-footer).look-dark .hero-subtitle, body :is(.section, .site-footer).look-dark .hero-description, body :is(.section, .site-footer).look-dark .section-description, body :is(.section, .site-footer).look-dark p { color: var(--text-light); }
body :is(.section, .site-footer).look-dark .section-eyebrow { color: var(--primary-text, var(--primary)); }
body :is(.section, .site-footer).look-dark .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .6); }
body :is(.section, .site-footer).look-brand {
background: var(--primary); color: #fff;
--section-text-color: #fff; --heading-color: #fff; --text: #fff; --text-light: rgba(255, 255, 255, .82); --text-lighter: rgba(255, 255, 255, .6);
--border: rgba(255, 255, 255, .25); --surface: rgba(255, 255, 255, .12); --card-bg: rgba(255, 255, 255, .12); --card-border: 1px solid rgba(255, 255, 255, .22); --card-shadow: none;
--btn-bg: #fff; --btn-color: var(--primary); --primary-text: #fff; --primary-glow: rgba(255, 255, 255, .28);
}
body :is(.section, .site-footer).look-brand .section-title, body :is(.section, .site-footer).look-brand .hero-title, body :is(.section, .site-footer).look-brand h2, body :is(.section, .site-footer).look-brand h3 { color: #fff; }
body :is(.section, .site-footer).look-brand .section-subtitle, body :is(.section, .site-footer).look-brand .hero-subtitle, body :is(.section, .site-footer).look-brand .hero-description, body :is(.section, .site-footer).look-brand .section-description, body :is(.section, .site-footer).look-brand p { color: var(--text-light); }
body :is(.section, .site-footer).look-brand .section-eyebrow { color: #fff; background: rgba(255, 255, 255, .16); }
body :is(.section, .site-footer).look-brand .section-eyebrow::before { background: #fff; }
body :is(.section, .site-footer).look-brand a:not(.btn):not([class*="btn"]) { color: #fff; }
body :is(.section, .site-footer).look-brand .btn-outline { color: #fff; border-color: rgba(255, 255, 255, .7); background: transparent; }
body :is(.section, .site-footer).look-brand .btn-outline:hover { background: #fff; color: var(--primary); }
body :is(.section, .site-footer).look-brand .step-number, body :is(.section, .site-footer).look-brand .service-icon, body :is(.section, .site-footer).look-brand .stat-number { color: #fff; }
body :is(.section, .site-footer).look-framed { padding-block: calc(var(--section-py) * .55); }
body :is(.section, .site-footer).look-framed > .container { padding-block: calc(var(--section-py) * .8); padding-inline: clamp(1.25rem, 4vw, 3.5rem); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--background-alt); }
body :is(.section, .site-footer).look-glass {
background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--background)), color-mix(in srgb, var(--secondary) 12%, var(--background)));
--card-bg: rgba(255, 255, 255, .55); --card-border: 1px solid rgba(255, 255, 255, .7); --card-shadow: 0 10px 40px rgba(15, 20, 32, .10);
}
body.theme-dark :is(.section, .site-footer).look-glass { --card-bg: rgba(255, 255, 255, .06); --card-border: 1px solid rgba(255, 255, 255, .12); }
body :is(.section, .site-footer).look-glass .card { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.img-mask-arch :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) { overflow: hidden; border-radius: 999px 999px var(--radius) var(--radius); }
.img-mask-circle :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) { overflow: hidden; border-radius: 50%; aspect-ratio: 1; }
.img-mask-circle :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) img { height: 100%; aspect-ratio: 1; object-fit: cover; }
.img-mask-squircle :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) { overflow: hidden; border-radius: 22% / 26%; }
.img-mask-blob :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) { overflow: hidden; border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; }
.img-mask-diagonal :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); border-radius: 0; box-shadow: none; }
.img-mask-hexagon :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image) { clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); border-radius: 0; box-shadow: none; }
.img-filter-mono img:not(.logo-img) { filter: grayscale(1); }
.img-filter-warm img:not(.logo-img) { filter: sepia(.32) saturate(1.15) contrast(1.02); }
.img-filter-cool img:not(.logo-img) { filter: saturate(.85) hue-rotate(-8deg) brightness(1.03); }
.img-filter-vivid img:not(.logo-img) { filter: saturate(1.4) contrast(1.06); }
.img-filter-duotone :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .hero-cover) { background: var(--primary); }
.img-filter-duotone :is(.gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .hero-cover) img { filter: grayscale(1) contrast(1.08); mix-blend-mode: luminosity; }
.bem-divider-top { position: absolute; top: -1px; left: 0; right: 0; z-index: 2; line-height: 0; pointer-events: none; transform: scaleY(-1); }
.bem-divider-top svg { display: block; width: 100%; height: clamp(28px, 6vw, 80px); }
.section:has(> .bem-divider-top) > .container { position: relative; z-index: 1; }
.visitor-theme-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border); border-radius: 50%; background: var(--surface); color: var(--text); box-shadow: var(--shadow-md); cursor: pointer; transition: transform .15s; }
.visitor-theme-toggle:hover { transform: scale(1.06); }
.visitor-theme-toggle .fa-sun { display: none; }
html[data-visitor-theme="dark"] .visitor-theme-toggle .fa-sun { display: inline; }
html[data-visitor-theme="dark"] .visitor-theme-toggle .fa-moon { display: none; }
html[data-visitor-theme="dark"] .hero-cover::after { background: linear-gradient(100deg, rgba(5, 8, 14, .86) 0%, rgba(5, 8, 14, .6) 45%, rgba(5, 8, 14, .25) 100%); }
html[data-visitor-theme="dark"] img.logo-img { filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)); }
@media (max-width: 639.98px) { .visitor-theme-toggle { width: 40px; height: 40px; left: 12px; bottom: 12px; } }
.hero-motion-kenburns .hero-cover-img, .hero-motion-kenburns .hero-img-wrapper img { animation: heroKenBurns 24s ease-in-out infinite alternate; transform-origin: 60% 40%; will-change: transform; }
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.1) translate(-1.5%, 1%); } }
.hero-motion-kenburns .hero-img-wrapper { overflow: hidden; border-radius: var(--img-radius, var(--radius-lg)); }
.hero-motion-parallax .hero-cover-img { transform: scale(1.2); transform-origin: center; }
.hero-motion-parallax .hero-img-wrapper { will-change: transform; }
.hero-motion-float .hero-img-wrapper { animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.motion-none .hero-motion-kenburns .hero-cover-img, .motion-none .hero-motion-kenburns .hero-img-wrapper img, .motion-none .hero-motion-float .hero-img-wrapper { animation: none; }
.section [data-fx] { --fx-pad-d: .35em .8em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.section :is(h1, h2, h3, p, span)[data-fx] { display: inline-block; max-width: 100%; }
.section [data-fx][style*="display:block"] { display: block; }
.section [data-fx="box"] { padding: var(--fx-pad, var(--fx-pad-d)); border-radius: var(--fx-radius, var(--radius-sm)); background: var(--fx-bg, var(--surface)); box-shadow: var(--shadow-sm); }
.section [data-fx="pill"] { padding: var(--fx-pad, .25em .9em); border-radius: 999px; background: var(--fx-bg, var(--primary-glow)); }
.section [data-fx="marker"] { padding: 0 .15em; background: linear-gradient(transparent 58%, var(--fx-bg, var(--primary-glow)) 58%); border-radius: 0; }
.section [data-fx="underline"] { padding: 0 0 .12em; background: linear-gradient(var(--fx-bg, var(--primary)), var(--fx-bg, var(--primary))) no-repeat 0 100% / 100% .14em; border-radius: 0; }
.section [data-fx="outline"] { padding: var(--fx-pad, var(--fx-pad-d)); border: 2px solid var(--fx-bg, var(--primary)); border-radius: var(--fx-radius, var(--radius-sm)); background: transparent; }
.section [data-fx="glass"] { padding: var(--fx-pad, var(--fx-pad-d)); border-radius: var(--fx-radius, var(--radius)); background: var(--fx-bg, rgba(255, 255, 255, .16)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, .28); box-shadow: 0 8px 30px rgba(0, 0, 0, .12); }
.section [data-fx="brand"] { padding: var(--fx-pad, var(--fx-pad-d)); border-radius: var(--fx-radius, var(--radius-sm)); background: var(--fx-bg, var(--primary)); color: #fff; }
.section [data-fx="gradient"] { padding: 0; background: linear-gradient(95deg, var(--fx-bg, var(--primary)), var(--secondary)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
.section .section-eyebrow[data-fx="box"], .section .section-eyebrow[data-fx="pill"], .section-eyebrow[data-fx="brand"], .section-eyebrow[data-fx="glass"], .section-eyebrow[data-fx="outline"],
.hero-pre-title[data-fx="box"], .hero-pre-title[data-fx="pill"], .hero-pre-title[data-fx="brand"], .hero-pre-title[data-fx="glass"], .hero-pre-title[data-fx="outline"] { padding: var(--fx-pad, .3em .8em); }
.style-editorial .section-eyebrow[data-fx]::before { display: none; }
.t-hl { font-style: italic; color: var(--primary-text, var(--primary)); }
.hl-serif .t-hl { font-family: 'Instrument Serif', 'Cormorant Garamond', Georgia, serif; font-weight: 400; letter-spacing: 0; text-transform: none; }
.hl-accent .t-hl { font-style: normal; }
.hl-underline .t-hl {
font-style: normal; color: inherit;
text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: .07em; text-underline-offset: .14em; text-decoration-skip-ink: auto;
}
:is(.look-dark, .look-brand, .on-dark, .component-contact.variant-dark, .component-hero.variant-cover) .t-hl { color: inherit; }
.hl-underline :is(.look-dark, .look-brand, .on-dark, .component-contact.variant-dark, .component-hero.variant-cover) .t-hl { text-decoration-color: currentColor; }
.contrast-calm {
--fs-h1: clamp(1.9rem, 1.35rem + 2.3vw, 2.75rem);
--fs-h2: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
--fs-h3: clamp(1.1rem, 1rem + .4vw, 1.3rem);
}
.contrast-bold {
--fs-h1: clamp(2.3rem, 1.2rem + 4.6vw, 4.5rem);
--fs-h2: clamp(1.8rem, 1.1rem + 3vw, 3.2rem);
--fs-h3: clamp(1.15rem, 1rem + .7vw, 1.5rem);
}
.contrast-poster {
--fs-h1: clamp(2.5rem, 1rem + 6.4vw, 6.25rem);
--fs-h2: clamp(2rem, 1rem + 4.2vw, 4rem);
--fs-h3: clamp(1.2rem, 1.05rem + .8vw, 1.6rem);
}
.contrast-poster :is(.hero-title, .section-title) { line-height: 1.02; letter-spacing: -.025em; }
.contrast-bold :is(.hero-title, .section-title) { line-height: 1.08; }
:is(.contrast-bold, .contrast-poster) :is(.hero-title, .section-title) { overflow-wrap: break-word; hyphens: auto; }
.measure-narrow { --measure: 56ch; }
.measure-wide { --measure: 74ch; }
:is(.measure-narrow, .measure-wide) :is(.section-subtitle, .section-description, .about-text, .hero-subtitle, .hero-description, .cta-description) { max-width: var(--measure); }
:is(.measure-narrow, .measure-wide) .text-center :is(.section-description, .about-text, .cta-description) { margin-inline: auto; }
.eyebrow-plain :is(.section-eyebrow, .hero-pre-title) { color: var(--text-light); font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow-serif :is(.section-eyebrow, .hero-pre-title) {
color: var(--primary-text, var(--primary)); font-family: var(--font-heading, inherit); font-style: italic; font-weight: 400;
font-size: 1.1rem; letter-spacing: 0; text-transform: none;
}
body:is(.eyebrow-plain, .eyebrow-serif) :is(.section, .site-footer) :is(.section-eyebrow, .hero-pre-title):not([data-fx]) { padding: 0; border-radius: 0; background: none; }
:is(.eyebrow-plain, .eyebrow-serif) .section-eyebrow::before { display: none; }
.has-dropcap :is(.about-text, .section-description, .hero-description)::first-letter {
float: left; margin: .06em .12em 0 0;
font-family: var(--font-heading, inherit); font-size: 3.4em; font-weight: 400; line-height: .82;
color: var(--primary-text, var(--primary));
}
:is(.look-dark, .look-brand, .on-dark) .has-dropcap :is(.about-text, .section-description)::first-letter,
.has-dropcap:is(.look-dark, .look-brand, .on-dark) :is(.about-text, .section-description, .hero-description)::first-letter { color: inherit; }
@media (min-width: 1024px) {
.head-side .container:has(> .section-head) {
display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.head-side.ratio-1-2 .container:has(> .section-head) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.head-side.ratio-2-1 .container:has(> .section-head) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.head-side .container:has(> .section-head) > .section-head { grid-column: 1; grid-row: 1 / span 12; }
.head-side .container:has(> .section-head) > :not(.section-head):not(style) { grid-column: 2; }
.head-side .section-head .section-subtitle { margin-bottom: var(--space-4); }
.head-side .container:has(> .section-head) :is(.grid-3, .grid-4, .grid, .process-steps, .testimonials-grid, .gallery-grid, .stats-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.head-side.ratio-2-1 .container:has(> .section-head) :is(.grid-3, .grid-4, .grid, .process-steps, .testimonials-grid, .gallery-grid, .stats-grid) { grid-template-columns: minmax(0, 1fr); }
.head-side .container:has(> .section-head) .faq-list { max-width: none; }
.head-sticky .container:has(> .section-head) > .section-head { position: sticky; top: calc(var(--sticky-offset, 88px)); align-self: start; }
}
.head-side .section-head > :last-child { margin-bottom: 0; }
.head-side .section-head .section-title { hyphens: manual; text-wrap: balance; overflow-wrap: break-word; }
@media (max-width: 1023.98px) { .head-side .section-head { margin-bottom: var(--space-8); } }
@media (min-width: 1024px) {
.ratio-1-2 :is(.about-grid.with-image, .hero-content.has-image) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.ratio-2-1 :is(.about-grid.with-image, .hero-content.has-image) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
body .section.cards-plain .card {
background: transparent; border: 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); border-radius: 0;
box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; padding: var(--space-5) 0 0; transform: none;
}
body .section.cards-plain .card:hover { transform: none; box-shadow: none; }
body .section.cards-plain :is(.service-icon, .stat-icon, .step-icon, .feature-icon) { background: transparent; box-shadow: none; }
.img-bleed { overflow-x: clip; --bleed: calc(max(0px, (100vw - var(--section-maxw, var(--container-width))) / 2) + var(--section-px, var(--container-px))); }
.img-bleed :is(.about-image-wrapper, .hero-image) :is(img, picture, .responsive-image, .about-img-wrapper, .hero-img-wrapper, .image-gallery) { border-radius: 0; }
@media (max-width: 1023.98px) {
.img-bleed :is(.about-image-wrapper, .hero-image) { margin-inline: calc(-1 * var(--section-px, var(--container-px))); }
}
@media (min-width: 1024px) {
.img-bleed.variant-split .about-image-wrapper { margin-left: calc(-1 * var(--bleed)); }
.img-bleed.variant-split-reverse .about-image-wrapper { margin-right: calc(-1 * var(--bleed)); }
.img-bleed .hero-content.has-image .hero-image { margin-right: calc(-1 * var(--bleed)); }
}
.section-rule {
position: absolute; left: 0; right: 0; z-index: 1; max-width: var(--section-maxw, var(--container-width)); margin-inline: auto;
padding-inline: var(--section-px, var(--container-px)); pointer-events: none;
}
.section-rule::before { content: ""; display: block; height: 1px; background: color-mix(in srgb, currentColor 22%, transparent); }
.section-rule.is-top { top: 0; }
.section-rule.is-bottom { bottom: 0; }
.img-ratio-1-1 { --img-ar: 1 / 1; }
.img-ratio-4-5 { --img-ar: 4 / 5; }
.img-ratio-4-3 { --img-ar: 4 / 3; }
.img-ratio-3-2 { --img-ar: 3 / 2; }
.img-ratio-16-9 { --img-ar: 16 / 9; }
.section.img-ratio :is(.gallery-item > .gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .builder-image, .gallery-after, .case-fig) :is(img, .responsive-image) {
width: 100%; height: auto; aspect-ratio: var(--img-ar); object-fit: cover;
}
.img-sharp :is(.gallery-item, .gallery-item > .gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .builder-image),
.img-sharp :is(.gallery-item > .gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .builder-image, .case-fig) img { border-radius: 0; }
.img-soft :is(.hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .builder-image) { border-radius: var(--radius-lg); overflow: hidden; }
.img-soft :is(.gallery-item > .gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .builder-image) img { border-radius: var(--radius-lg); }
.img-print :is(.gallery-item > .gallery-image-wrapper, .hero-img-wrapper, .about-img-wrapper, .team-image, .service-image, .blog-image, .builder-image, .gallery-after, .case-fig) img {
padding: clamp(6px, .9vw, 12px); background: #fff; border-radius: 2px;
box-shadow: 0 1px 2px rgb(0 0 0 / .08), 0 14px 30px -20px rgb(0 0 0 / .5);
}
.img-print .gallery-item { overflow: visible; }
.img-print .gallery-item:hover .gallery-image { transform: none; }
.img-print .img-bleed :is(.about-image-wrapper, .hero-image) img { padding: 0; box-shadow: none; }
.section.caps-below .gallery-item { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.section.caps-below .gallery-overlay { background: none; }
.section.caps-below .gallery-overlay :is(.gallery-item-title, .gallery-item-caption) { display: none; }
.section.caps-below .gallery-grid .gallery-card-body { display: block; padding: var(--space-3) 0 0; }
.section.caps-below .gallery-card-title { margin: 0; font-size: var(--fs-small); font-weight: 700; }
.section.caps-below .gallery-card-text { font-size: var(--fs-small); -webkit-line-clamp: 4; }
.section.caps-numbered .gallery-grid { counter-reset: fig; }
.section.caps-numbered .gallery-item { counter-increment: fig; }
.section.caps-numbered .gallery-grid .gallery-card-body { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .8em; align-items: baseline; }
.section.caps-numbered .gallery-card-body::before {
content: counter(fig, decimal-leading-zero); grid-row: span 2;
font-family: var(--font-heading, inherit); font-size: 1.05rem; line-height: 1.2; font-variant-numeric: tabular-nums;
color: var(--primary-text, var(--primary));
}
.section.caps-numbered .gallery-card-body > * { grid-column: 2; }
:is(.look-dark, .look-brand, .on-dark).caps-numbered .gallery-card-body::before { color: inherit; opacity: .75; }
:where(img[data-sized]) { width: auto; height: auto; }
.component-hero.variant-manifesto .hero-content { grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); }
.variant-manifesto .hero-text { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 4rem); max-width: none; }
.variant-manifesto .hero-text > * { grid-column: 1 / -1; }
.component-hero.variant-manifesto .hero-title {
max-width: 15ch; margin: 0 0 clamp(1.5rem, 3vw, 2.5rem);
font-size: calc(clamp(2.5rem, 1.1rem + 6vw, 6.5rem) * var(--heading-scale)); line-height: 1; letter-spacing: -.03em;
text-wrap: balance; hyphens: manual; overflow-wrap: break-word;
}
.variant-manifesto .hero-subtitle { font-size: var(--fs-lead); }
.variant-manifesto .hero-image :is(img, .responsive-image) { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 900px) {
.variant-manifesto .hero-text { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.variant-manifesto .hero-text > .hero-subtitle { grid-column: 1; }
.variant-manifesto .hero-text > .hero-description { grid-column: 2; }
.variant-manifesto .hero-image :is(img, .responsive-image) { aspect-ratio: 21 / 9; }
}
.ledger { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); }
.text-center .ledger { margin-inline: auto; text-align: left; }
.ledger-row { padding: var(--space-5) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.ledger-line { display: flex; align-items: baseline; gap: .6em; }
.ledger-name { flex: 0 1 auto; min-width: 0; margin: 0; font-size: var(--fs-h3); line-height: 1.25; overflow-wrap: break-word; }
.ledger-name a { color: inherit; text-decoration: none; }
.ledger-name a:hover { text-decoration: underline; text-underline-offset: .15em; }
.ledger-name a::after { content: "→"; display: inline-block; margin-left: .45em; color: var(--primary-text, var(--primary)); transition: transform .2s ease; }
.ledger-name a:hover::after { transform: translateX(3px); }
.ledger-leader { flex: 1 1 2rem; min-width: 1.5rem; border-bottom: 2px dotted color-mix(in srgb, currentColor 35%, transparent); transform: translateY(-.28em); }
.ledger-price { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--primary-text, var(--primary)); }
.ledger-desc { max-width: 62ch; margin: var(--space-2) 0 0; color: var(--text-light); }
:is(.look-dark, .look-brand, .on-dark) .ledger-price { color: inherit; }
@media (max-width: 479.98px) {
.ledger-line { flex-wrap: wrap; }
.ledger-leader { display: none; }
.ledger-price { flex-basis: 100%; white-space: normal; }
}
.case-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
.case { display: grid; gap: var(--space-5); }
.case-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-2); }
.case.is-single .case-pair { grid-template-columns: minmax(0, 1fr); }
.case-fig { position: relative; margin: 0; }
.case-fig img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); }
.case-label {
position: absolute; top: .6em; left: .6em; padding: .25em .6em; border-radius: 2px;
background: rgb(0 0 0 / .62); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.case-title { margin: 0 0 var(--space-2); font-size: var(--fs-h3); }
.case-desc { max-width: 60ch; margin: 0; color: var(--text-light); }
@media (min-width: 900px) {
.case { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); align-items: end; gap: var(--space-8); }
.case:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.case:nth-child(even) .case-pair { order: 2; }
}
.letter { max-width: 42rem; margin-inline: auto; }
.letter-body p { margin: 0 0 1.1em; font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem); line-height: 1.75; }
.letter-ps { margin: var(--space-6) 0; padding-left: 1em; border-left: 2px solid var(--primary); font-family: var(--font-heading, inherit); font-size: 1.15rem; font-style: italic; }
.letter-sign { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-8); }
.letter-portrait { flex: 0 0 auto; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.letter-name { display: block; font-family: 'Instrument Serif', var(--font-heading, Georgia), serif; font-size: 1.7rem; font-style: italic; line-height: 1.1; }
.letter-role { display: block; margin-top: .15em; color: var(--text-light); font-size: var(--fs-small); }
.letter .about-cta { margin-top: var(--space-6); }
:is(.look-dark, .look-brand, .on-dark) .letter-ps { border-left-color: currentColor; }
.factsheet { max-width: 860px; margin: 0; border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); }
.text-center .factsheet { margin-inline: auto; text-align: left; }
.fact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-4); align-items: baseline; padding: var(--space-4) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.fact dt { margin: 0; font-weight: 600; }
.fact dt small { display: block; margin-top: .2em; color: var(--text-light); font-size: var(--fs-small); font-weight: 400; }
.fact dd { margin: 0; font-family: var(--font-heading, inherit); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); font-variant-numeric: tabular-nums; line-height: 1.1; text-align: right; }
.bigquote { max-width: 52rem; margin: 0; }
.text-center .bigquote { margin-inline: auto; }
.bigquote blockquote { margin: 0; }
.bigquote blockquote p {
margin: 0; font-family: var(--font-heading, inherit); line-height: 1.22; letter-spacing: -.01em; text-wrap: pretty;
font-size: calc(clamp(1.6rem, 1rem + 2.6vw, 3rem) * var(--heading-scale));
}
.bigquote blockquote p::before { content: "\201E"; }
.bigquote blockquote p::after { content: "\201D"; }
.bigquote figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25em .75em; margin-top: var(--space-6); }
.bigquote figcaption::before { content: ""; align-self: center; width: 2.5rem; height: 1px; background: currentColor; opacity: .5; }
.bigquote-name { font-weight: 700; }
.bigquote-role { color: var(--text-light); }
.bigquote-name p, .bigquote-role p { display: inline; margin: 0; }
.component-contact.variant-simple .contact-direct { gap: var(--space-2); }
.component-contact.variant-simple .contact-direct > :is(a, span) {
display: block; color: inherit; font-family: var(--font-heading, inherit); font-size: clamp(1.45rem, 1rem + 2.4vw, 2.75rem); font-weight: 400;
line-height: 1.15; overflow-wrap: anywhere; text-decoration: none;
}
.component-contact.variant-simple .contact-direct > :is(a, span):not(:first-child) { font-size: clamp(1.05rem, .85rem + .9vw, 1.45rem); }
.component-contact.variant-simple .contact-direct i { display: none; }
.component-contact.variant-simple .contact-direct a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.form-line .form-control {
padding-inline: 0; border: 0; border-bottom: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 0;
background: transparent;
}
.form-line .form-control:focus { box-shadow: none; border-bottom: 2px solid var(--primary); }
.form-line .contact-form.card { padding-inline: 0; border: 0; background: transparent; box-shadow: none; }
.form-boxed .form-control { border: 2px solid color-mix(in srgb, currentColor 70%, transparent); border-radius: 0; background: var(--surface); }
.form-boxed .form-control:focus { box-shadow: none; outline: 2px solid var(--primary); outline-offset: 2px; }
.form-boxed .styled-form :is(button, .btn) { border-radius: 0; }
.form-soft .form-control { border-color: transparent; border-radius: var(--radius); background: var(--background-alt); }
.form-soft .form-control:focus { background: var(--surface); border-color: var(--primary); }
.icons-plain :is(.service-icon, .stat-icon, .step-icon, .trust-strip-icon, .guarantee-icon) {
width: auto; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none;
color: var(--primary-text, var(--primary)); font-size: 1.25rem;
}
:is(.look-dark, .look-brand, .on-dark) :is(.service-icon, .stat-icon, .step-icon, .trust-strip-icon, .guarantee-icon):is(.icons-plain *) { color: inherit; }
.icons-none :is(.service-icon, .stat-icon, .step-icon, .trust-strip-icon, .guarantee-icon, .hero-feature-icon) { display: none; }
body:is(.tex-paper, .tex-blueprint)::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.tex-paper::after {
opacity: .07; mix-blend-mode: multiply; background-size: 180px 180px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.theme-dark.tex-paper::after, html[data-visitor-theme="dark"] .tex-paper::after { mix-blend-mode: screen; opacity: .05; }
.tex-blueprint::after {
opacity: .5; background-size: 28px 28px;
background-image:
linear-gradient(to right, color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px),
linear-gradient(to bottom, color-mix(in srgb, var(--primary) 8%, transparent) 1px, transparent 1px);
}
@media print { body::after { display: none; } }
@media (prefers-reduced-motion: no-preference) {
.mz-anim:is(.entrance-rise, .entrance-fade) .section-visible:not(.component-hero) > .container > * { transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.mz-anim:is(.entrance-rise, .entrance-fade) .section:not(.component-hero):not(.section-visible) > .container > * { opacity: 0; }
.mz-anim.entrance-rise .section:not(.component-hero):not(.section-visible) > .container > * { transform: translateY(18px); }
.mz-anim:is(.entrance-rise, .entrance-fade) .section-visible > .container > :nth-child(2) { transition-delay: .08s; }
.mz-anim:is(.entrance-rise, .entrance-fade) .section-visible > .container > :nth-child(3) { transition-delay: .16s; }
.mz-anim:is(.entrance-rise, .entrance-fade) .section-visible > .container > :nth-child(n+4) { transition-delay: .24s; }
}
:is(.entrance-rise, .entrance-fade) [data-animate]:not([data-animate="parallax"]) { opacity: 1; transform: none; transition: none; }
.site-header.header-shrink { transition: box-shadow .25s ease; }
.site-header.header-shrink .header-content { transition: min-height .25s ease, padding .25s ease; }
.site-header.header-shrink .logo .gallery-thumbnail { transition: height .25s ease; }
.site-header.header-shrink.is-scrolled { box-shadow: 0 10px 28px -22px rgb(0 0 0 / .45); }
.site-header.header-shrink.is-scrolled .header-content { min-height: 48px; padding-block: 4px; }
.site-header.header-shrink.is-scrolled .logo .gallery-thumbnail { height: 30px; }
@media (prefers-reduced-motion: reduce) { .site-header.header-shrink, .site-header.header-shrink * { transition: none; } }
.footer-signature {
grid-column: 1 / -1; margin: 0;
font-family: 'Instrument Serif', var(--font-heading, Georgia), serif; font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem); font-style: italic; line-height: 1.2;
opacity: .92;
}
.nav-menu {
gap: var(--space-lg);
list-style: none;
margin: 0;
padding: 0;
align-items: center;}
.mobile-menu-toggle {
background: none;
border: none;
width: 30px;
height: 24px;
position: relative;
cursor: pointer;}
.mobile-menu-toggle span {display: block;
width: 100%;
height: 3px;
background-color: var(--text);
position: absolute;
left: 0;
transition: var(--transition);}
.mobile-menu-toggle span:nth-child(1) {top: 0;}
.mobile-menu-toggle span:nth-child(2) {top: 10px;}
.mobile-menu-toggle span:nth-child(3) {top: 20px;}
.mobile-menu-toggle.active span:nth-child(1) {transform: rotate(45deg);
top: 10px;}
.mobile-menu-toggle.active span:nth-child(2) {opacity: 0;}
.mobile-menu-toggle.active span:nth-child(3) {transform: rotate(-45deg);
top: 10px;}
@media (max-width: 1023.98px){
.mobile-menu-toggle {display: block;}
}
@media (max-width: 1023.98px){
.nav-menu {display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--surface);
flex-direction: column;
padding: var(--space-lg);
gap: var(--space-md);
border-top: 1px solid var(--border);
box-shadow: var(--shadow-md);}
}
@media (max-width: 1023.98px){
.nav-menu.active {display: flex;}
}
.variant-split .hero-container {grid-template-columns: 1fr 1fr;}
.variant-centered .hero-content {text-align: center;
margin: 0 auto;}
.variant-parallax {position: relative;
overflow: hidden;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
.variant-parallax::before {content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;}
.variant-parallax .container {position: relative;
z-index: 2;}
.variant-video {position: relative;
overflow: hidden;}
.hero-video-background {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 0;}
.variant-video::after {content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;}
.variant-video .container {position: relative;
z-index: 2;}
@media (max-width: 768px){
.variant-split .hero-container {grid-template-columns: 1fr;}
}
.cta-wrapper.variant-parallax {position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;}
.cta-wrapper.variant-parallax::before {content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.6);
z-index: 1;}
.cta-wrapper.variant-parallax .container {position: relative;
z-index: 2;}
.modal-overlay {position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--modal-overlay);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: var(--space-md);}
.modal-overlay.modal-open {opacity: 1;
visibility: visible;}
.modal-content {position: relative;
max-width: 90vw;
max-height: 90vh;
margin: auto;
background: transparent;
transform: scale(0.9);
transition: transform 0.3s ease;}
.modal-open .modal-content {transform: scale(1);}
.modal-close {position: absolute;
top: -50px;
right: 0;
color: var(--modal-text);
font-size: 40px;
cursor: pointer;
background: none;
border: none;
padding: 10px 15px;
z-index: 10000;
line-height: 1;
transition: opacity 0.3s ease;}
.modal-close:hover {opacity: 0.8;}
.modal-image {max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: var(--radius);
display: block;
margin: 0 auto;}
.modal-caption {position: absolute;
bottom: -50px;
left: 0;
right: 0;
color: var(--modal-text);
text-align: center;
padding: var(--space-sm);
background: var(--modal-caption-bg);
border-radius: var(--radius-sm);
font-size: var(--small-size);}
.gallery-modal-nav {position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 var(--space-md);
box-sizing: border-box;
left: 0;}
.gallery-modal-prev,
.gallery-modal-next {background: var(--modal-control-bg);
color: var(--modal-text);
border: 1px solid var(--modal-control-border);
width: 50px;
height: 50px;
border-radius: 50%;
font-size: 24px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
backdrop-filter: blur(5px);}
.gallery-modal-prev:hover,
.gallery-modal-next:hover {background: var(--modal-control-hover);
transform: scale(1.1);}
.gallery-modal-counter {position: absolute;
top: -50px;
left: 0;
color: var(--modal-text);
font-size: var(--small-size);
background: var(--modal-caption-bg);
padding: var(--space-xs) var(--space-sm);
border-radius: var(--radius-sm);
backdrop-filter: blur(5px);}
@media (max-width: 480px){
.modal-close {top: -40px;
font-size: 35px;}
}
@media (max-width: 480px){
.gallery-modal-prev,
.gallery-modal-next {width: 40px;
height: 40px;
font-size: 20px;}
}
@keyframes fadeIn {from { opacity: 0; }
to { opacity: 1; }}
.modal-overlay.modal-open {animation: fadeIn 0.3s ease;}
@keyframes slideIn {from {
transform: translateY(30px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}}
.counter-value {font-family: var(--font-mono, 'JetBrains Mono', monospace);
font-size: clamp(2.5rem, 5vw, 3.75rem);
font-weight: 800;
line-height: 1;
color: var(--secondary, #c9a84c);
display: block;
margin-bottom: 0.5rem;}
.cta-wrapper, .cta-parallax {text-align: center;}
.gallery-modal {position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
background: var(--modal-overlay, rgba(0,0,0,0.95));
animation: fadeIn 0.25s ease;}
.gallery-modal.modal-open {display: flex;}
.gallery-modal-content {position: relative;
max-width: 90vw;
max-height: 85vh;}
.gallery-modal-image {max-width: 90vw;
max-height: 85vh;
object-fit: contain;
border-radius: var(--radius-sm);
display: block;}
.gallery-modal-close {position: absolute;
top: -48px;
right: 0;
font-size: 2.5rem;
color: #fff;
cursor: pointer;
line-height: 1;
background: none;
border: none;
padding: 0;
transition: var(--transition);}
.gallery-modal-close:hover {opacity: 0.7;}
@keyframes fadeInUp {from { opacity: 0; transform: translateY(40px); }
to   { opacity: 1; transform: translateY(0); }}
@keyframes slideIn {from { opacity: 0; transform: translateX(-30px); }
to   { opacity: 1; transform: translateX(0); }}
@keyframes pulse {0%, 100% { transform: scale(1); }
50%       { transform: scale(1.04); }}
.section {opacity: 1;}
.section.section-visible {opacity: 1;
transform: translateY(0);}
.nav-menu.nav-open {display: flex !important;}
.section-visible .card:nth-child(1) {transition-delay: 0s;}
.section-visible .card:nth-child(2) {transition-delay: 0.08s;}
.section-visible .card:nth-child(3) {transition-delay: 0.16s;}
.section-visible .card:nth-child(4) {transition-delay: 0.24s;}
.section-visible .card:nth-child(5) {transition-delay: 0.32s;}
.section-visible .card:nth-child(6) {transition-delay: 0.40s;}
.component-hero .hero-title,
.component-hero h1 {max-width: 980px;
margin-left: auto;
margin-right: auto;
color: var(--field-title-color, var(--section-text-color, var(--text, #111827))) !important;
letter-spacing: 0 !important;}
.component-hero .hero-subtitle {color: var(--field-subtitle-color, var(--section-text-color, var(--text-light, #475569))) !important;}
.component-hero .hero-description {color: var(--field-description-color, var(--section-text-color, var(--text-light, #475569))) !important;}
.is-light-surface,
.is-light-surface.card,
.is-light-surface.pricing-card,
.is-light-surface.contact-form,
.is-light-surface.contact-info,
.is-light-surface.faq-item,
.is-light-surface.service-card,
.is-light-surface.testimonial-card,
.is-light-surface.stat-card {color: #111827 !important;}
.is-light-surface :is(h1, h2, h3, h4, h5, h6, p, span, li, small, strong, label, summary):not(.btn):not(.badge):not(.pricing-badge):not(.contact-icon):not(.faq-toggle),
.is-light-surface .pricing-name,
.is-light-surface .price-amount,
.is-light-surface .price-period,
.is-light-surface .pricing-description,
.is-light-surface .pricing-features li,
.is-light-surface .faq-question,
.is-light-surface .faq-answer,
.is-light-surface .contact-item,
.is-light-surface .contact-item span,
.is-light-surface .contact-item a {color: #111827 !important;
-webkit-text-fill-color: #111827 !important;
opacity: 1 !important;}
.is-light-surface .pricing-description,
.is-light-surface .pricing-features li,
.is-light-surface .faq-answer,
.is-light-surface .section-subtitle,
.is-light-surface .hero-subtitle,
.is-light-surface .hero-description {color: #475569 !important;
-webkit-text-fill-color: #475569 !important;}
.is-dark-surface,
.is-dark-surface.card,
.is-dark-surface.pricing-card,
.is-dark-surface.contact-form,
.is-dark-surface.contact-info,
.is-dark-surface.faq-item,
.is-dark-surface.service-card,
.is-dark-surface.testimonial-card,
.is-dark-surface.stat-card {color: #f8fafc !important;}
.is-dark-surface :is(h1, h2, h3, h4, h5, h6, p, span, li, small, strong, label, summary):not(.btn):not(.badge):not(.pricing-badge):not(.contact-icon):not(.faq-toggle),
.is-dark-surface .pricing-name,
.is-dark-surface .price-amount,
.is-dark-surface .price-period,
.is-dark-surface .faq-question {color: #f8fafc !important;
-webkit-text-fill-color: #f8fafc !important;
opacity: 1 !important;}
.is-dark-surface .pricing-description,
.is-dark-surface .pricing-features li,
.is-dark-surface .faq-answer,
.is-dark-surface .section-subtitle,
.is-dark-surface .hero-subtitle,
.is-dark-surface .hero-description,
.is-dark-surface .contact-item,
.is-dark-surface .contact-item span,
.is-dark-surface .contact-item a {color: #cbd5e1 !important;
-webkit-text-fill-color: #cbd5e1 !important;
opacity: 1 !important;}
.is-light-surface .btn-primary,
.is-dark-surface .btn-primary,
.is-light-surface button[type="submit"],
.is-dark-surface button[type="submit"] {color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;}
[data-animate] {opacity: 0;
transition-property: opacity, transform;
transition-timing-function: ease;}
[data-animate].bem-animated {opacity: 1;
transform: none !important;}
[data-animate="fade-up"] {transform: translateY(40px);}
[data-animate="fade-down"] {transform: translateY(-40px);}
[data-animate="fade-left"] {transform: translateX(40px);}
[data-animate="fade-right"] {transform: translateX(-40px);}
[data-animate="zoom-in"] {transform: scale(.88);}
[data-animate="zoom-out"] {transform: scale(1.12);}
[data-animate="flip-up"] {transform: perspective(600px) rotateX(20deg); transform-origin: bottom;}
.bem-hover-lift .card,
.bem-hover-lift .service-card,
.bem-hover-lift .testimonial-card,
.bem-hover-lift .pricing-card {transition: transform .25s ease, box-shadow .25s ease;}
.bem-hover-lift .card:hover,
.bem-hover-lift .service-card:hover,
.bem-hover-lift .testimonial-card:hover,
.bem-hover-lift .pricing-card:hover {transform: translateY(-8px);
box-shadow: 0 20px 50px rgba(0,0,0,.25);}
.bem-hover-scale .card:hover,
.bem-hover-scale .service-card:hover {transform: scale(1.04);
transition: transform .2s ease;}
.bem-hover-glow .card:hover,
.bem-hover-glow .service-card:hover {box-shadow: 0 0 30px var(--section-glow, var(--primary, #6366f1)), 0 8px 32px rgba(0,0,0,.2);
transition: box-shadow .25s ease;}
.bem-hover-pulse .card:hover,
.bem-hover-pulse .service-card:hover {animation: bemPulse .6s ease;}
@keyframes bemPulse {0%,100% { transform: scale(1); }
50% { transform: scale(1.03); }}
.bem-hover-shake .card,
.bem-hover-shake .service-card,
.bem-hover-shake .testimonial-card,
.bem-hover-shake .pricing-card {transition: transform .1s ease;}
.bem-hover-shake .card:hover,
.bem-hover-shake .service-card:hover,
.bem-hover-shake .testimonial-card:hover,
.bem-hover-shake .pricing-card:hover {animation: bemShake .4s ease;}
@keyframes bemShake {0%,100% { transform: translateX(0); }
20% { transform: translateX(-6px); }
40% { transform: translateX(6px); }
60% { transform: translateX(-4px); }
80% { transform: translateX(4px); }}
.bem-hover-rotate .card,
.bem-hover-rotate .service-card,
.bem-hover-rotate .testimonial-card,
.bem-hover-rotate .pricing-card {transition: transform .3s ease;}
.bem-hover-rotate .card:hover,
.bem-hover-rotate .service-card:hover,
.bem-hover-rotate .testimonial-card:hover,
.bem-hover-rotate .pricing-card:hover {transform: rotate(3deg) scale(1.03);}
.bem-hover-border-glow .card,
.bem-hover-border-glow .service-card,
.bem-hover-border-glow .testimonial-card,
.bem-hover-border-glow .pricing-card {transition: box-shadow .25s ease, border-color .25s ease;
border: 1px solid transparent;}
.bem-hover-border-glow .card:hover,
.bem-hover-border-glow .service-card:hover,
.bem-hover-border-glow .testimonial-card:hover,
.bem-hover-border-glow .pricing-card:hover {box-shadow: 0 0 0 2px var(--section-glow, var(--primary, #6366f1)), 0 0 18px var(--section-glow, var(--primary, #6366f1));
border-color: var(--section-glow, var(--primary, #6366f1));}
.bem-glass {background: rgba(255,255,255,.72) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.55);}
.bem-glass .card,
.bem-glass .service-card,
.bem-glass .testimonial-card,
.bem-glass .pricing-card {background: rgba(255,255,255,.42) !important;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border: 1px solid rgba(255,255,255,.55);}
.bem-gradient-text h1,
.bem-gradient-text h2 {background: linear-gradient(135deg, var(--primary, #6366f1), var(--secondary, #a855f7), var(--accent, #ec4899));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;}
.bem-overlay {position: relative;}
.bem-overlay::before {content: '';
position: absolute;
inset: 0;
background: rgba(0,0,0,.45);
z-index: 0;
pointer-events: none;}
.bem-overlay > * {position: relative;
z-index: 1;}
.bem-has-overlay {position: relative;}
.bem-has-overlay::before {content: '';
position: absolute;
inset: 0;
background: var(--overlay-color, #000);
opacity: var(--overlay-opacity, 0.5);
z-index: 0;
pointer-events: none;}
.bem-has-overlay > * {position: relative;
z-index: 1;}
.bem-btn-sm .btn, .bem-btn-sm button.primary {padding: 8px 18px; font-size: .85rem;}
.bem-btn-lg .btn, .bem-btn-lg button.primary {padding: 16px 36px; font-size: 1.1rem;}
.bem-btn-xl .btn, .bem-btn-xl button.primary {padding: 20px 48px; font-size: 1.25rem;}
.bem-divider-bottom {position: absolute;
bottom: -1px;
left: 0;
right: 0;
line-height: 0;
z-index: 2;}
.bem-divider-bottom svg {width: 100%;
height: 40px;}
@media (max-width: 768px){
.section[style*="--mobile-columns"] .grid {grid-template-columns: repeat(var(--mobile-columns), minmax(0, 1fr)) !important;}
}
@media (max-width: 768px){
.section[style*="--mobile-padding"] {padding-left: var(--mobile-padding) !important;
padding-right: var(--mobile-padding) !important;}
}
@media (max-width: 768px){
.section[style*="--mobile-font-size"] {font-size: var(--mobile-font-size) !important;}
}
@media (max-width: 768px){
.section[style*="--mobile-font-size"] h1,
.section[style*="--mobile-font-size"] h2 {font-size: calc(var(--mobile-font-size) * 1.5) !important;}
}
@media (max-width: 768px){
.section[style*="--mobile-title-size"] h1,
.section[style*="--mobile-title-size"] h2,
.section[style*="--mobile-title-size"] .section-title {font-size: var(--mobile-title-size) !important;}
}
.bem-neon-border {box-shadow: 0 0 0 2px var(--section-glow, #6366f1),
0 0 20px var(--section-glow, #6366f1),
inset 0 0 20px rgba(99,102,241,.05);}
.bem-grain::after {content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
opacity: .35;}
.bem-animated-gradient {background-size: 200% 200% !important;
animation: bemGradShift 6s ease infinite;}
@keyframes bemGradShift {0%   { background-position: 0% 50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0% 50%; }}
.bem-shimmer-text h1,
.bem-shimmer-text h2,
.bem-shimmer-text .section-title {background: linear-gradient(90deg, currentColor 25%, var(--section-glow, #a5b4fc) 50%, currentColor 75%);
background-size: 200% auto;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
animation: bemShimmer 3s linear infinite;}
@keyframes bemShimmer {to { background-position: -200% center; }}
.bem-soft-blob::before {content: '';
position: absolute;
width: 60%;
height: 60%;
background: radial-gradient(circle, var(--section-glow, rgba(99,102,241,.3)) 0%, transparent 70%);
top: 10%;
left: 20%;
filter: blur(60px);
pointer-events: none;
z-index: 0;
animation: bemBlobPulse 8s ease-in-out infinite;}
@keyframes bemBlobPulse {0%, 100% { transform: scale(1) translate(0,0); }
33%  { transform: scale(1.1) translate(5%,-5%); }
66%  { transform: scale(.9) translate(-5%,5%); }}
.bem-tilt3d {transform-style: preserve-3d;
transition: transform .15s ease;
will-change: transform;}
.bem-mouse-spotlight {--spot-x: 50%;
--spot-y: 50%;}
.bem-mouse-spotlight::after {content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle 300px at var(--spot-x) var(--spot-y),
rgba(255,255,255,.08) 0%, transparent 70%);
pointer-events: none;
z-index: 1;}
[data-load-animate="fade-in"] {animation: bemFadeIn .6s ease both;}
[data-load-animate="fade-up"] {animation: bemFadeUp .6s ease both;}
[data-load-animate="fade-down"] {animation: bemFadeDown .6s ease both;}
[data-load-animate="zoom-in"] {animation: bemZoomIn .6s ease both;}
[data-load-animate="zoom-out"] {animation: bemZoomOut .6s ease both;}
[data-load-animate="rotate"] {animation: bemRotateIn .6s ease both;}
[data-load-animate="bounce"] {animation: bemBounce .8s ease both;}
@keyframes bemFadeIn {from { opacity:0 } to { opacity:1 }}
@keyframes bemFadeUp {from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:none }}
@keyframes bemFadeDown {from { opacity:0; transform:translateY(-30px) } to { opacity:1; transform:none }}
@keyframes bemZoomIn {from { opacity:0; transform:scale(.85) } to { opacity:1; transform:none }}
@keyframes bemZoomOut {from { opacity:0; transform:scale(1.1) } to { opacity:1; transform:none }}
@keyframes bemRotateIn {from { opacity:0; transform:rotate(-5deg) } to { opacity:1; transform:none }}
@keyframes bemBounce {0%{opacity:0;transform:translateY(40px)} 60%{transform:translateY(-8px)} 80%{transform:translateY(4px)} 100%{opacity:1;transform:none}}
.bem-btn-hover-lighten .btn:hover {filter: brightness(1.2);}
.bem-btn-hover-darken  .btn:hover {filter: brightness(0.8);}
.bem-btn-hover-scale   .btn:hover {transform: scale(1.06);}
.bem-btn-hover-glow    .btn:hover {box-shadow: 0 0 20px var(--btn-bg, #6366f1);}
.bem-btn-hover-slide   .btn {position: relative;
overflow: hidden;
z-index: 0;}
.bem-btn-hover-slide .btn::after {content: '';
position: absolute;
inset: 0;
background: rgba(255,255,255,0.15);
transform: translateX(-100%);
transition: transform .3s ease;
z-index: -1;}
.bem-btn-hover-slide .btn:hover::after {transform: translateX(0);}
.bem-heading-gradient h1,
.bem-heading-gradient h2,
.bem-heading-gradient .section-title {background: linear-gradient(var(--text-grad-angle, 90deg), var(--text-grad-1, #6366f1), var(--text-grad-2, #a855f7));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;}
.bem-pattern-dots::before {background-image: radial-gradient(var(--bem-pattern-color, #ffffff) 1.5px, transparent 1.5px);
background-size: 20px 20px;}
.bem-pattern-grid::before {background-image:
linear-gradient(var(--bem-pattern-color, #ffffff) 1px, transparent 1px),
linear-gradient(90deg, var(--bem-pattern-color, #ffffff) 1px, transparent 1px);
background-size: 30px 30px;}
.bem-pattern-diagonal::before {background-image: repeating-linear-gradient(
45deg,
var(--bem-pattern-color, #ffffff) 0,
var(--bem-pattern-color, #ffffff) 1px,
transparent 0,
transparent 50%
);
background-size: 12px 12px;}
.bem-pattern-cross::before {background-image:
linear-gradient(var(--bem-pattern-color, #ffffff) 1px, transparent 1px),
linear-gradient(90deg, var(--bem-pattern-color, #ffffff) 1px, transparent 1px);
background-size: 16px 16px;
background-position: -8px -8px;}
.bem-pattern-zigzag::before {background-image: repeating-linear-gradient(
-45deg,
var(--bem-pattern-color, #ffffff) 0, var(--bem-pattern-color, #ffffff) 1px,
transparent 0, transparent 10px
),
repeating-linear-gradient(
45deg,
var(--bem-pattern-color, #ffffff) 0, var(--bem-pattern-color, #ffffff) 1px,
transparent 0, transparent 10px
);
background-size: 20px 10px;}
.bem-pattern-circuit::before {background-image: radial-gradient(var(--bem-pattern-color, #ffffff) 1px, transparent 1px),
linear-gradient(var(--bem-pattern-color, #ffffff) 1px, transparent 1px),
linear-gradient(90deg, var(--bem-pattern-color, #ffffff) 1px, transparent 1px);
background-size: 30px 30px, 30px 30px, 30px 30px;}
@keyframes bemFloatIcon {0%, 100% { transform: translateY(0) rotate(0deg); }
33%  { transform: translateY(-18px) rotate(8deg); }
66%  { transform: translateY(10px) rotate(-6deg); }}
[style*="--section-px"] {padding-left: var(--section-px) !important;
padding-right: var(--section-px) !important;}
@media (min-width: 1025px){
[style*="--section-px-desktop"] {padding-left: var(--section-px-desktop) !important;
padding-right: var(--section-px-desktop) !important;}
}
[style*="--section-maxw"] .container {max-width: var(--section-maxw) !important;}
.bem-btn-outline .btn,
.bem-btn-outline a.btn,
.bem-btn-outline button.btn {background: transparent !important;
border: 2px solid var(--btn-bg, #6366f1) !important;
color: var(--btn-bg, #6366f1) !important;
box-shadow: none !important;}
.bem-btn-outline .btn:hover,
.bem-btn-outline a.btn:hover {background: var(--btn-bg, #6366f1) !important;
color: #fff !important;}
.bem-btn-ghost .btn,
.bem-btn-ghost a.btn,
.bem-btn-ghost button.btn {background: rgba(255,255,255,.12) !important;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(255,255,255,.28) !important;
color: #fff !important;
box-shadow: none !important;}
.bem-btn-ghost .btn:hover,
.bem-btn-ghost a.btn:hover {background: rgba(255,255,255,.22) !important;}
.bem-btn-pill .btn,
.bem-btn-pill a.btn,
.bem-btn-pill button.btn {border-radius: 9999px !important;
padding-left: 2em !important;
padding-right: 2em !important;}
.bem-btn-underline .btn,
.bem-btn-underline a.btn,
.bem-btn-underline button.btn {background: transparent !important;
border: none !important;
border-bottom: 2px solid var(--btn-bg, #6366f1) !important;
color: var(--btn-bg, #6366f1) !important;
border-radius: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-shadow: none !important;}
.bem-card-hover-lift .card {transition: transform .3s ease, box-shadow .3s ease;
will-change: transform;}
.bem-card-hover-lift .card:hover {transform: translateY(-10px);
box-shadow: 0 24px 60px rgba(0,0,0,.22) !important;}
.bem-card-hover-glow .card {transition: box-shadow .3s ease;}
.bem-card-hover-glow .card:hover {box-shadow: 0 0 0 2px var(--card-hover-glow, #6366f1), 0 0 30px var(--card-hover-glow, #6366f1) !important;}
.bem-img-hover-zoom .card,
.bem-img-hover-zoom .card-image,
.bem-img-hover-zoom figure {overflow: hidden;}
.bem-img-hover-zoom img {transition: transform .4s ease;
will-change: transform;}
.bem-img-hover-zoom img:hover,
.bem-img-hover-zoom .card:hover img {transform: scale(1.08);}
.bem-img-hover-glow img {transition: box-shadow .3s ease;}
.bem-img-hover-glow .card:hover img,
.bem-img-hover-glow img:hover {box-shadow: 0 0 0 3px var(--img-hover-glow, #6366f1), 0 0 30px var(--img-hover-glow, #6366f1) !important;}
.bem-img-hover-overlay .card {position: relative;
overflow: hidden;}
.bem-img-hover-overlay .card::after {content: '';
position: absolute;
inset: 0;
background: var(--img-hover-overlay-color, rgba(0,0,0,.4));
opacity: 0;
transition: opacity .3s ease;
pointer-events: none;
z-index: 1;}
.bem-img-hover-overlay .card:hover::after {opacity: 1;}
.bem-img-frame img {border: var(--img-frame-width, 3px) solid var(--img-frame-color, #6366f1);
padding: 4px;
background: var(--img-frame-color, #6366f1);}
.modal-overlay {display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.95);
z-index: 9999;
justify-content: center;
align-items: center;}
.modal-overlay.modal-open {display: flex !important;}
.modal-content {position: relative;
max-width: 90vw;
max-height: 90vh;
background: transparent;}
.modal-image {max-width: 100%;
max-height: 85vh;
height: auto;
object-fit: contain;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);}
.modal-close {position: absolute;
top: -44px;
right: 0;
background: rgba(255,255,255,0.2);
border: none;
color: #fff;
font-size: 28px;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
z-index: 10000;}
.modal-close:hover {background: rgba(255,255,255,0.4);}
.modal-caption {position: absolute;
bottom: -40px;
left: 0; right: 0;
text-align: center;
color: #fff;
font-size: 15px;}
.gallery-modal-nav {position: absolute;
top: 50%;
left: -60px; right: -60px;
transform: translateY(-50%);
display: flex;
justify-content: space-between;
pointer-events: none;}
.gallery-modal-prev,
.gallery-modal-next {pointer-events: auto;
background: rgba(255,255,255,0.2);
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
font-size: 26px;
color: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;}
.gallery-modal-prev:hover,
.gallery-modal-next:hover {background: rgba(255,255,255,0.45);}
.gallery-modal-counter {position: absolute;
top: -40px;
left: 0;
color: #fff;
font-size: 13px;
background: rgba(0,0,0,0.5);
padding: 4px 10px;
border-radius: 20px;}
@media (max-width: 600px){
.gallery-modal-nav {left: 0; right: 0; padding: 0 8px;}
}
.gallery-modal.modal-open {display: flex !important;
padding: clamp(14px, 2vw, 28px);
background:
radial-gradient(circle at 50% 0%, rgba(124,58,237,.28), transparent 34%),
rgba(2, 6, 23, .94) !important;
backdrop-filter: blur(18px);}
.gallery-modal .modal-content {width: min(1180px, 96vw);
height: min(900px, 94vh);
max-width: none;
max-height: none;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
gap: 14px;
align-items: center;}
.gallery-modal .gallery-modal-image {justify-self: center;
align-self: center;
max-width: 100%;
max-height: calc(94vh - 170px);
width: auto;
height: auto;
object-fit: contain;
border-radius: 18px;
box-shadow: 0 34px 90px rgba(0,0,0,.48);
background: rgba(255,255,255,.04);}
.gallery-modal .modal-close {position: fixed;
top: clamp(16px, 2vw, 28px);
right: clamp(16px, 2vw, 28px);
width: 48px;
height: 48px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(12px);}
.gallery-modal .gallery-modal-counter {position: static;
justify-self: start;
align-self: center;
color: #fff;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.14);
padding: 8px 13px;
font-weight: 800;}
.gallery-modal .modal-caption {position: static;
min-height: 24px;
color: #fff;
font-weight: 750;
text-align: center;}
.gallery-modal .gallery-modal-nav {position: fixed;
inset: 50% clamp(16px, 3vw, 44px) auto;
transform: translateY(-50%);}
.gallery-modal .gallery-modal-prev,
.gallery-modal .gallery-modal-next {width: 54px;
height: 54px;
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.18);
backdrop-filter: blur(12px);
font-size: 34px;}
.gallery-modal .gallery-modal-prev:hover,
.gallery-modal .gallery-modal-next:hover,
.gallery-modal .modal-close:hover {background: rgba(255,255,255,.22);}
.gallery-modal-thumbs {display: flex;
gap: 10px;
max-width: min(100%, 920px);
margin: 0 auto;
padding: 10px;
overflow-x: auto;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
border-radius: 18px;
scrollbar-width: thin;}
.gallery-modal-thumb {width: 74px;
height: 54px;
flex: 0 0 auto;
border: 2px solid transparent;
border-radius: 12px;
padding: 0;
overflow: hidden;
background: transparent;
opacity: .56;
cursor: pointer;}
.gallery-modal-thumb img {width: 100%;
height: 100%;
object-fit: cover;
display: block;}
.gallery-modal-thumb.is-active {opacity: 1;
border-color: var(--primary, #7c3aed);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary, #7c3aed) 26%, transparent);}
@media (max-width: 720px){
.gallery-modal .gallery-modal-image {max-height: calc(94vh - 150px); border-radius: 14px;}
}
@media (max-width: 720px){
.gallery-modal .gallery-modal-nav {inset: auto 18px 88px; transform: none;}
}
@media (max-width: 720px){
.gallery-modal .gallery-modal-prev,
.gallery-modal .gallery-modal-next {width: 46px; height: 46px;}
}
@media (max-width: 720px){
.gallery-modal-thumb {width: 58px; height: 44px;}
}
.component-services.variant-services-benefits .grid,
.component-services.variant-services-enterprise .grid {grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
align-items: stretch;}
.component-services.variant-services-benefits .service-card,
.component-services.variant-services-enterprise .service-card {position: relative;
display: grid;
gap: 12px;
padding: clamp(20px, 2.6vw, 30px) !important;
overflow: hidden;}
.component-services.variant-services-benefits .service-card::before {content: "";
position: absolute;
inset: 0 0 auto;
height: 4px;
background: linear-gradient(90deg, var(--primary, #ff6b1a), var(--accent, #14b8a6));}
.component-services.variant-services-enterprise .service-card {border-left: 5px solid var(--primary, #ff6b1a) !important;}
.component-services.variant-services-enterprise .service-icon,
.component-services.variant-services-benefits .service-icon {width: 54px;
height: 54px;
display: grid;
place-items: center;
border-radius: 18px;
background: color-mix(in srgb, var(--primary, #ff6b1a) 14%, transparent);}
.component-services.variant-services-enterprise .service-title,
.component-services.variant-services-benefits .service-title {font-size: clamp(1.08rem, 1.4vw, 1.32rem);}
.component-pricing.variant-pricing-packages .pricing-grid,
.component-pricing.variant-pricing-highlight .pricing-grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: clamp(18px, 2.4vw, 32px);
align-items: stretch;}
.component-pricing.variant-pricing-packages .pricing-card,
.component-pricing.variant-pricing-highlight .pricing-card {position: relative;
display: flex;
flex-direction: column;
gap: 14px;
padding: clamp(24px, 3vw, 36px) !important;}
.component-pricing.variant-pricing-highlight .pricing-card.featured {background: #ffffff !important;
color: #0f172a !important;
border-color: color-mix(in srgb, var(--primary, #7c3aed) 48%, #ffffff) !important;
transform: translateY(-10px);
box-shadow: 0 34px 90px rgba(15, 23, 42, 0.22);}
.component-pricing.variant-pricing-highlight .pricing-card.featured :where(h1,h2,h3,h4,p,span,li,strong):not(.btn):not(.pricing-badge) {color: #0f172a !important;
-webkit-text-fill-color: #0f172a !important;}
.component-pricing.variant-pricing-highlight .pricing-card:not(.featured) {opacity: 0.88;}
.component-gallery.variant-gallery-reference .gallery-grid,
.component-gallery.variant-gallery-proof .gallery-grid {grid-template-columns: repeat(4, minmax(0, 1fr));}
.component-gallery.variant-gallery-proof .gallery-item:first-child,
.component-gallery.variant-gallery-reference .gallery-item:first-child {grid-column: span 2;
grid-row: span 2;}
.component-gallery.variant-gallery-proof .gallery-item:first-child .gallery-image-wrapper,
.component-gallery.variant-gallery-reference .gallery-item:first-child .gallery-image-wrapper {aspect-ratio: 16 / 10;}
.component-about.variant-about-trust .about-content,
.component-contact.variant-contact-lead .contact-grid {display: grid;
grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: clamp(22px, 4vw, 52px);
align-items: center;}
.component-about.variant-about-trust .about-features,
.component-about.variant-about-trust .feature-list {display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0;
list-style: none;}
.component-about.variant-about-trust .about-features li,
.component-about.variant-about-trust .feature-list li {border: 1px solid color-mix(in srgb, var(--primary, #ff6b1a) 26%, transparent);
border-radius: 999px;
padding: 9px 13px;
background: color-mix(in srgb, var(--primary, #ff6b1a) 8%, transparent);}
.component-contact.variant-contact-lead .contact-form,
.component-contact.variant-contact-lead .contact-info {padding: clamp(22px, 3vw, 34px) !important;}
.component-contact.variant-contact-lead .form-label {display: block;
margin-bottom: 7px;
font-weight: 800;}
.component-cta.variant-cta-offer .cta-content {display: grid;
gap: 18px;
place-items: center;
text-align: center;
padding: clamp(34px, 6vw, 72px) !important;
background:
radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--primary, #ff6b1a) 24%, transparent), transparent 32%),
linear-gradient(135deg, color-mix(in srgb, var(--surface, #ffffff) 90%, var(--primary, #ff6b1a) 10%), var(--surface, #ffffff)) !important;}
.component-testimonials.variant-testimonials-trust .testimonials-grid {display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: clamp(16px, 2.4vw, 28px);}
.component-testimonials.variant-testimonials-trust .testimonial-card {padding: clamp(22px, 3vw, 34px) !important;}
@media (max-width: 760px){
.component-pricing.variant-pricing-highlight .pricing-card.featured {transform: none;}
}
@media (max-width: 760px){
.component-gallery.variant-gallery-reference .gallery-grid,
.component-gallery.variant-gallery-proof .gallery-grid {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 760px){
.component-gallery.variant-gallery-proof .gallery-item:first-child,
.component-gallery.variant-gallery-reference .gallery-item:first-child {grid-column: span 2;
grid-row: auto;}
}
@media (max-width: 760px){
.component-about.variant-about-trust .about-content,
.component-contact.variant-contact-lead .contact-grid {grid-template-columns: 1fr;}
}
@media (max-width: 768px) {.hide-mobile  { display: none !important; }}
@media (min-width: 769px) and (max-width: 1024px){
.hide-tablet {display: none !important;}
}
@media (min-width: 1025px){
.hide-desktop {display: none !important;}
}