@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-cyrillic-ext.woff2') format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-vietnamese.woff2') format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('/assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
--primary-blue: #0C71C3;
--primary-violet: #0C71C3;
--primary-hover: #0A5FA8;
--primary-dark: #063B6D;
--primary-light: #E6F3FC;
--text-dark: #1e293b;
--text-muted: #64748b;
--surface: #FFFFFF;
--bg-alt: #f2f2f2;
--bg-alt-solid: #f2f2f2;
--border: rgba(12, 113, 195, 0.14);
--border-soft: rgba(12, 113, 195, 0.08);
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.06);
--shadow-subtle: 0 2px 12px rgba(0, 0, 0, 0.06);
--shadow-soft: 0 25px 70px rgba(15, 23, 42, 0.12);
--shadow-card: 0 15px 35px rgba(12, 113, 195, 0.18);
--radius-xl: 26px;
--radius-lg: 18px;
--radius-md: 14px;
--radius-pill: 999px;
--weight-normal: 500;
--weight-medium: 600;
--weight-bold: 700;
--weight-extra: 800;
--weight-black: 900;
--transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--transition-bounce: all 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
--error-red: #ef4444;
--error-red-dark: #dc2626;
--error-bg: #fef2f2;
--error-border: #fecaca;
--success-green: #16a34a;
--success-green-light: #22c55e;
--review-star-gold: #F9AB00;
--cta-sky: color-mix(in srgb, var(--primary-light) 42%, var(--primary-blue));
--cta-sky-deep: var(--primary-blue);
--cta-sky-shadow: color-mix(in srgb, var(--primary-blue) 30%, transparent);
--cta-sky-shadow-strong: color-mix(in srgb, var(--primary-blue) 42%, transparent);
--cta-navy-shadow: color-mix(in srgb, var(--primary-blue) 38%, transparent);
--cta-navy-shadow-strong: color-mix(in srgb, var(--primary-blue) 50%, transparent);
--hero-padding-top-mobile: clamp(104px, calc(8vh + 72px), 132px);
--hero-padding-top-desktop: clamp(168px, calc(11vh + 44px), 196px);
--hero-padding-bottom-mobile: 44px;
--hero-padding-bottom-desktop: clamp(44px, 4.5vw, 56px);
--nav-offset-top: 12px;
--nav-block-height: 64px;
--content-gap-below-nav: 32px;
--nav-clearance-desktop: calc(var(--nav-offset-top) + var(--nav-block-height) + var(--content-gap-below-nav));
--content-padding-top-desktop: var(--nav-clearance-desktop);
--page-hero-ref-desktop-padding-top: var(--hero-padding-top-desktop);
--page-hero-ref-desktop-padding-bottom: var(--hero-padding-bottom-desktop);
}
.bg-light { background-color: var(--primary-light); }
.bg-alt { background-color: var(--bg-alt); }
.bg-surface { background-color: var(--surface); }
.bg-dark { background-color: var(--primary-dark); }
main > section.bg-light:has(+ section:not(.bg-light)),
main > section.bg-light:has(+ script + section:not(.bg-light)),
main > section.bg-light:last-of-type {
background: linear-gradient(
to bottom,
var(--primary-light) 0%,
var(--primary-light) calc(100% - clamp(80px, 14vh, 140px)),
transparent 100%
);
}
section:has(+ section.bg-light),
section:has(+ section.bg-alt),
section:has(+ section.bg-surface),
section:has(+ script + section.bg-light),
section:has(+ script + section.bg-alt),
section:has(+ script + section.bg-surface),
main > section:last-of-type {
position: relative;
}
section:has(+ section.bg-light) > .container,
section:has(+ section.bg-alt) > .container,
section:has(+ section.bg-surface) > .container,
section:has(+ script + section.bg-light) > .container,
section:has(+ script + section.bg-alt) > .container,
section:has(+ script + section.bg-surface) > .container,
main > section:last-of-type > .container {
position: relative;
z-index: 2;
}
section:has(+ section.bg-light)::after,
section:has(+ section.bg-alt)::after,
section:has(+ section.bg-surface)::after,
section:has(+ script + section.bg-light)::after,
section:has(+ script + section.bg-alt)::after,
section:has(+ script + section.bg-surface)::after,
main > section:last-of-type::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: clamp(80px, 14vh, 140px);
pointer-events: none;
z-index: 1;
}
section:has(+ section.bg-light)::after,
section:has(+ script + section.bg-light)::after { background: linear-gradient(to bottom, transparent, var(--primary-light)); }
section:has(+ section.bg-alt)::after,
section:has(+ script + section.bg-alt)::after { background: linear-gradient(to bottom, transparent, var(--bg-alt-solid)); }
section:has(+ section.bg-surface)::after,
section:has(+ script + section.bg-surface)::after { background: linear-gradient(to bottom, transparent, var(--surface)); }
main > section:last-of-type::after { background: linear-gradient(to bottom, transparent, var(--bg-alt-solid)); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
padding: 0;
font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
font-weight: var(--weight-normal);
color: var(--text-dark);
line-height: 1.6;
background-color: var(--bg-alt);
overflow-x: hidden;
}
h1, h2, h3, .font-heading {
font-family: 'Plus Jakarta Sans', sans-serif;
letter-spacing: -0.03em;
color: var(--primary-dark);
}
h1 {
font-weight: var(--weight-extra);
margin-top: 16px;
margin-bottom: 24px;
text-wrap: balance;
}
.section-title {
font-size: clamp(28px, 4vw, 40px);
font-weight: var(--weight-extra);
color: var(--primary-dark);
line-height: 1.15;
position: relative;
display: block;
padding-bottom: 16px;
margin-bottom: 12px;
text-wrap: balance;
text-align: inherit;
}
.section-title::after {
content: "";
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--primary-blue));
border-radius: var(--radius-pill);
opacity: 0.8;
}
.text-left .section-title::after,
.section-title.text-left::after {
left: 0 !important;
transform: none !important;
}
h3 { font-weight: var(--weight-bold); }
.container { width: min(1300px, 100% - 48px); margin-inline: auto; }
.text-center { text-align: center; }
.section-header {
text-align: center;
margin-bottom: 50px;
max-width: 800px;
margin-inline: auto;
}
.section-header p {
font-size: 18px;
color: var(--text-muted);
line-height: 1.6;
font-weight: var(--weight-normal);
}
.hero-badge {
display: inline-block;
padding: 6px 16px;
background: var(--primary-light);
color: var(--primary-blue);
font-size: 11px;
font-weight: var(--weight-extra);
letter-spacing: 2px;
border-radius: var(--radius-pill);
border: 1px solid rgba(12, 113, 195, 0.1);
text-transform: uppercase;
margin-bottom: 24px;
}
.btn-primary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 28px;
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
color: white;
text-decoration: none;
font-weight: var(--weight-medium);
border-radius: var(--radius-pill);
border: none;
box-shadow: 0 8px 28px rgba(12, 113, 195, 0.38);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(12, 113, 195, 0.45);
filter: brightness(1.1);
}
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
background: rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px solid rgba(12, 113, 195, 0.2) !important;
color: var(--primary-dark) !important;
border-radius: var(--radius-pill);
font-weight: var(--weight-medium);
text-decoration: none;
transition: var(--transition);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.btn-secondary:hover {
background: white !important;
border-color: var(--primary-blue) !important;
color: var(--primary-blue) !important;
box-shadow: 0 8px 25px rgba(12, 113, 195, 0.15);
transform: translateY(-2px);
}
.btn-cta-green {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
background: var(--success-green);
color: white;
padding: 16px 32px;
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: var(--weight-bold);
font-size: 17px;
border: none;
cursor: pointer;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
transition: all 0.25s ease;
animation: cta-pulse 3s ease-in-out infinite;
}
.btn-cta-green:hover {
background: color-mix(in srgb, var(--success-green) 85%, black);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
}
.triple-cta-group {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: nowrap;
margin: 28px 0;
}
.triple-cta-group .btn-primary,
.triple-cta-group .btn-secondary,
.triple-cta-group .btn-booking-anchor,
.triple-cta-group .btn-callback {
padding: 13px 20px;
font-size: 14px;
white-space: nowrap;
}
.triple-cta-group.justify-content-center {
justify-content: center;
}
.triple-cta-group.justify-content-start {
justify-content: flex-start;
}
@media (max-width: 640px) {
.triple-cta-group {
flex-direction: column;
align-items: stretch;
gap: 12px;
}
.triple-cta-group .btn-primary,
.triple-cta-group .btn-secondary,
.triple-cta-group .btn-booking-anchor,
.triple-cta-group .btn-callback {
width: 100%;
justify-content: center;
text-align: center;
padding: 14px 24px;
font-size: 15px;
}
}
@keyframes cta-pulse {
0% { transform: scale(1); box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35); }
50% { transform: scale(1.03); box-shadow: 0 8px 28px rgba(22, 163, 74, 0.45); }
100% { transform: scale(1); box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35); }
}
@keyframes cta-pulse-booking {
0% { transform: scale(1); box-shadow: 0 4px 14px var(--cta-navy-shadow); }
50% { transform: scale(1.03); box-shadow: 0 8px 28px var(--cta-navy-shadow-strong); }
100% { transform: scale(1); box-shadow: 0 4px 14px var(--cta-navy-shadow); }
}
.btn-callback {
background: var(--success-green) !important;
color: white !important;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35) !important;
animation: cta-pulse 3s ease-in-out infinite !important;
border: none !important;
}
.btn-callback:hover {
background: color-mix(in srgb, var(--success-green) 85%, black) !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45) !important;
}
.btn-phone::before,
.btn-calendar::before,
.btn-callback::before,
.phone-link.btn-phone::before {
content: "";
display: inline-block;
width: 18px;
height: 18px;
background-color: currentColor;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: contain;
mask-size: contain;
vertical-align: middle;
position: relative;
top: -1px;
flex-shrink: 0;
}
.btn-phone .btn-text-desktop { display: none; }
.btn-phone .btn-text-mobile { display: inline; }
@media (min-width: 768px) {
.btn-phone .btn-text-desktop { display: inline; }
.btn-phone .btn-text-mobile { display: none; }
}
a:not([class*="btn-"]):not([class*="nav"]):not([class*="footer"]).btn-phone::before,
a:not([class*="btn-"]):not([class*="nav"]):not([class*="footer"]).btn-calendar::before,
a:not([class*="btn-"]):not([class*="nav"]):not([class*="footer"]).btn-callback::before {
margin-right: 8px;
}
.btn-phone::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}
.btn-calendar::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
}
.btn-callback::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 2 16 8 22 8'%3E%3C/polyline%3E%3Cline x1='22' y1='2' x2='16' y2='8'%3E%3C/line%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='16 2 16 8 22 8'%3E%3C/polyline%3E%3Cline x1='22' y1='2' x2='16' y2='8'%3E%3C/line%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
}
.mini-badge { font-size: 13px; font-weight: var(--weight-medium); color: var(--primary-dark); background: var(--surface); padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--border-soft); box-shadow: var(--shadow-xs); }
.hero-reassurance {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 16px;
}
.hero-reassurance .mini-badge {
font-size: 12px;
padding: 5px 12px;
box-shadow: var(--shadow-xs);
}
.hero-availability {
font-size: 14px;
color: var(--text-muted);
margin-top: 16px;
font-weight: var(--weight-normal);
}
.hero-availability strong {
color: var(--success-green);
font-weight: var(--weight-bold);
}
@media (max-width: 640px) {
.hero-reassurance {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.hero-reassurance .mini-badge {
font-size: 12px;
padding: 6px 10px;
text-align: center;
justify-content: center;
}
.btn-cta-green {
font-size: 15px;
padding: 14px 24px;
}
.hero-availability {
padding-bottom: 12px;
}
}
.faq-list { max-width: 750px; margin: 0 auto; }
.faq-item { border: 1px solid var(--border-soft); border-radius: var(--radius-lg); margin-bottom: 12px; overflow: hidden; background: var(--surface); box-shadow: var(--shadow-subtle); }
.faq-item summary { padding: 18px 24px; font-weight: var(--weight-bold); font-size: 16px; cursor: pointer; color: var(--primary-dark); list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-item summary::after { content: "+"; font-size: 22px; color: var(--primary-blue); font-weight: var(--weight-bold); transition: var(--transition); }
.faq-item[open] summary::after { content: "−"; }
.faq-item p { padding: 0 24px 18px; font-size: 15px; color: var(--text-muted); line-height: 1.7; }
#nav-wrapper {
position: fixed;
top: 12px;
left: 0;
right: 0;
z-index: 1000;
display: flex;
justify-content: center;
pointer-events: none;
padding: 0 24px;
}
@media (max-width: 640px) {
#nav-wrapper {
padding: 0 12px;
}
}
.nav-shell {
position: relative;
width: min(1300px, 100%);
background: var(--surface);
border-radius: var(--radius-xl);
padding: 12px 24px;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 24px;
box-shadow: var(--shadow-soft);
border: 1px solid var(--border-soft);
pointer-events: auto;
}
.brand-logo img { width: auto; height: 40px; max-width: 180px; border-radius: var(--radius-md); }
.nav-list { display: flex; list-style: none; gap: 8px; margin: 0; padding: 0; }
.nav-link {
text-decoration: none;
color: var(--text-dark);
font-weight: var(--weight-medium);
padding: 10px 18px;
border-radius: var(--radius-pill);
transition: var(--transition);
font-size: 15px;
}
.nav-link:hover { color: var(--primary-blue); background: var(--primary-light); }
.nav-link.active { color: var(--primary-blue); background: var(--primary-light); position: relative; }
.nav-link.active::after {
content: "";
position: absolute;
bottom: 6px;
left: 18px;
right: 18px;
height: 2px;
background: var(--primary-blue);
border-radius: var(--radius-pill);
}
.nav-right {
display: flex;
align-items: center;
gap: 12px;
justify-content: flex-end;
}
.nav-rustdesk-link {
display: inline-flex;
align-items: center;
gap: 7px;
flex-shrink: 0;
padding: 9px 13px;
border: 1px solid var(--border-soft);
border-radius: var(--radius-pill);
background: var(--primary-light);
color: var(--primary-dark);
font-size: 13px;
font-weight: var(--weight-bold);
text-decoration: none;
transition: var(--transition);
}
.nav-rustdesk-link:hover {
background: var(--surface);
color: var(--primary-blue);
}
.nav-rustdesk-link img {
width: 18px;
height: 18px;
}
.nav-right .phone-link {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
flex-shrink: 0;
background: var(--primary-blue);
color: white;
padding: 10px 20px;
border-radius: var(--radius-pill);
text-decoration: none;
font-weight: var(--weight-bold);
box-shadow: var(--shadow-card);
}
.nav-right .phone-link.btn-phone {
position: relative;
overflow: visible;
isolation: isolate;
z-index: 0;
animation: nav-phone-luminance 4.2s ease-in-out infinite;
}
.nav-right .phone-link.btn-phone::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
z-index: -1;
animation: nav-phone-signal-ring 3.6s ease-out infinite;
}
.nav-right .phone-link.btn-phone::before {
animation: nav-phone-icon-ring 5.5s ease-in-out infinite;
transform-origin: 50% 88%;
}
@keyframes nav-phone-luminance {
0%, 100% {
filter: brightness(1);
box-shadow: var(--shadow-card);
}
50% {
filter: brightness(1.07);
box-shadow: 0 6px 22px color-mix(in srgb, var(--primary-blue) 34%, transparent);
}
}
@keyframes nav-phone-signal-ring {
0% {
box-shadow: 0 0 0 0 color-mix(in srgb, var(--cta-sky) 52%, transparent);
opacity: 0.85;
}
65% {
box-shadow: 0 0 0 11px color-mix(in srgb, var(--cta-sky) 0%, transparent);
opacity: 0;
}
100% {
box-shadow: 0 0 0 11px color-mix(in srgb, var(--cta-sky) 0%, transparent);
opacity: 0;
}
}
@keyframes nav-phone-icon-ring {
0%, 78%, 100% {
transform: rotate(0deg) translateY(0);
}
81% {
transform: rotate(-16deg) translateY(-1px);
}
84% {
transform: rotate(13deg) translateY(-1px);
}
87% {
transform: rotate(-9deg) translateY(0);
}
90% {
transform: rotate(6deg) translateY(0);
}
93% {
transform: rotate(0deg) translateY(0);
}
}
@media (max-width: 1024px) {
.nav-rustdesk-link {
display: none;
}
.nav-right .phone-link {
gap: 6px;
padding: 8px 12px;
font-size: 12px;
}
}
@media (max-width: 1024px) {
#nav-wrapper:not(.nav-conversion-mode) .nav-right {
min-width: 48px;
justify-content: flex-end;
}
#nav-wrapper:not(.nav-conversion-mode) .nav-right .phone-link.btn-phone {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
max-width: calc(100% - 140px);
}
#nav-wrapper.nav-conversion-mode .nav-right {
margin-left: auto;
}
#nav-wrapper.nav-conversion-mode .nav-right .phone-link.btn-phone {
position: static;
left: auto;
top: auto;
transform: none;
max-width: none;
}
}
@media (max-width: 640px) {
.nav-right .phone-link {
padding: 8px 10px;
}
}
@media (max-width: 640px) {
.nav-shell {
padding: 10px 12px;
gap: 12px;
}
}
.nav-mobile-drawer {
position: fixed;
top: 0;
right: 0;
height: 100vh;
height: 100dvh;
width: min(400px, 100%);
max-width: 100vw;
background: var(--surface);
z-index: 10500;
transform: translateX(100%);
transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1);
padding: 18px 20px 20px;
box-shadow: -12px 0 40px color-mix(in srgb, var(--primary-dark) 12%, transparent);
display: flex;
flex-direction: column;
gap: 14px;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.nav-mobile-drawer.open { transform: translateX(0); }
body.drawer-open { overflow: hidden; }
.drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
padding-bottom: 4px;
border-bottom: 1px solid var(--border-soft);
}
.drawer-header .brand-info {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.drawer-header .brand-info img {
border-radius: var(--radius-md);
flex-shrink: 0;
}
.drawer-header h2 {
font-size: 17px;
margin: 0;
line-height: 1.25;
color: var(--primary-dark);
font-weight: var(--weight-bold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#drawer-close {
width: 44px;
height: 44px;
min-width: 44px;
min-height: 44px;
border-radius: 50%;
border: 1px solid var(--border-soft);
background: var(--surface);
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: var(--shadow-xs);
flex-shrink: 0;
transition: var(--transition);
}
#drawer-close:hover,
#drawer-close:focus-visible {
background: var(--primary-light);
border-color: var(--primary-blue);
outline: none;
}
.drawer-cta-stack {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
margin-top: auto;
padding-top: 8px;
border-top: 1px solid var(--border-soft);
}
.drawer-cta-row {
display: flex;
gap: 8px;
align-items: stretch;
}
.drawer-cta-row .drawer-cta {
flex: 1 1 0;
min-width: 0;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px 6px;
text-align: center;
}
.drawer-cta-row .drawer-cta:only-child {
flex: 1 1 100%;
}
.drawer-cta-row .drawer-cta__icon {
width: 32px;
height: 32px;
border-radius: 50%;
}
.drawer-cta-row .drawer-cta__icon svg {
width: 18px;
height: 18px;
}
.drawer-cta-row .drawer-cta__text {
align-items: center;
width: 100%;
gap: 2px;
text-wrap: balance;
overflow-wrap: break-word;
}
.drawer-cta-row .drawer-cta__label {
font-size: clamp(14px, 3.8vw, 15px);
line-height: 1.25;
}
.drawer-cta-row .drawer-cta__sub {
font-size: clamp(11px, 3.2vw, 12px);
line-height: 1.3;
opacity: 0.9;
}
.drawer-cta-row .drawer-cta--phone .drawer-cta__sub {
letter-spacing: -0.01em;
}
.drawer-cta {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
border-radius: var(--radius-lg);
text-decoration: none;
transition: var(--transition);
border: 1px solid transparent;
}
.drawer-cta__icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--radius-md);
flex-shrink: 0;
}
.drawer-cta__text {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.drawer-cta__label {
font-size: 15px;
font-weight: var(--weight-bold);
line-height: 1.3;
}
.drawer-cta__sub {
font-size: 13px;
font-weight: var(--weight-normal);
line-height: 1.35;
opacity: 0.88;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.drawer-cta--primary {
background: var(--primary-blue);
color: var(--surface);
box-shadow: var(--shadow-card);
}
.drawer-cta--primary .drawer-cta__icon {
background: color-mix(in srgb, var(--surface) 18%, transparent);
}
.drawer-cta--primary:hover {
background: var(--primary-hover);
}
.drawer-cta--phone {
background: var(--primary-light);
color: var(--primary-dark);
border-color: var(--border);
}
.drawer-cta--phone .drawer-cta__icon {
background: var(--surface);
color: var(--primary-blue);
}
.drawer-cta--phone:hover {
border-color: var(--primary-blue);
}
.drawer-cta--callback {
background: var(--surface);
color: var(--primary-dark);
border-color: var(--border-soft);
box-shadow: var(--shadow-xs);
}
.drawer-cta--callback .drawer-cta__icon {
background: color-mix(in srgb, var(--success-green) 12%, var(--surface));
color: var(--success-green);
}
.drawer-cta--callback:hover {
border-color: var(--primary-blue);
background: var(--primary-light);
}
.mobile-nav-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5px;
flex: 1;
align-content: start;
min-height: 0;
}
.mobile-nav-list li {
min-width: 0;
}
.mobile-nav-list li:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
.mobile-nav-list li a {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
min-height: 50px;
padding: 8px 6px;
background: var(--surface);
border-radius: var(--radius-md);
text-decoration: none;
color: var(--text-dark);
font-weight: var(--weight-medium);
font-size: clamp(13px, 3.5vw, 14px);
line-height: 1.3;
text-align: center;
text-wrap: balance;
overflow-wrap: break-word;
word-break: break-word;
hyphens: auto;
max-width: 100%;
box-sizing: border-box;
border: 1px solid var(--border-soft);
transition: var(--transition);
}
.mobile-nav-list li a:hover {
border-color: var(--border);
background: var(--primary-light);
color: var(--primary-blue);
}
.mobile-nav-list li a.active {
background: var(--primary-light);
color: var(--primary-blue);
border-color: var(--border);
font-weight: var(--weight-bold);
}
.drawer-whatsapp-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: 0;
padding: 10px 14px;
font-size: 14px;
font-weight: var(--weight-medium);
color: var(--text-muted);
text-decoration: none;
border-radius: var(--radius-pill);
border: 1px solid var(--border-soft);
transition: var(--transition);
flex-shrink: 0;
}
.drawer-whatsapp-link img {
width: 18px;
height: 18px;
flex-shrink: 0;
display: block;
}
.drawer-whatsapp-link:hover {
color: var(--primary-dark);
border-color: var(--border);
background: var(--primary-light);
}
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(6, 59, 109, 0.18);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
z-index: 10400;
opacity: 0;
pointer-events: none;
transition: opacity 0.32s ease;
}
.nav-overlay.visible { opacity: 1; pointer-events: auto; }
.hamburger {
display: none;
width: 48px;
height: 48px;
border-radius: 50%;
border: 1px solid var(--border-soft);
background: none;
padding: 0;
cursor: pointer;
position: relative;
transition: var(--transition);
}
.hamburger .hamburger-bar,
.hamburger::before,
.hamburger::after {
content: "";
position: absolute;
left: 14px;
width: 20px;
height: 2px;
background: var(--primary-blue);
border-radius: 2px;
transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.22s ease, top 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.hamburger::before { top: 16px; }
.hamburger .hamburger-bar { top: 23px; }
.hamburger::after { top: 30px; }
.hamburger.is-open::before {
top: 23px;
transform: rotate(45deg);
}
.hamburger.is-open .hamburger-bar {
opacity: 0;
transform: scaleX(0);
}
.hamburger.is-open::after {
top: 23px;
transform: rotate(-45deg);
}
.hamburger:hover,
.hamburger:focus-visible {
background: var(--primary-light);
border-color: var(--primary-blue);
outline: none;
}
@media (prefers-reduced-motion: reduce) {
.nav-mobile-drawer,
.nav-overlay,
.hamburger .hamburger-bar,
.hamburger::before,
.hamburger::after {
transition: none;
}
}
@media (max-width: 1024px) {
.nav-desktop { display: none; }
.hamburger { display: flex; align-items: center; justify-content: center; }
}
.site-footer { background: var(--bg-alt-solid); border-top: 1px solid var(--border-soft); padding: 60px 0 40px; margin-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.footer-brand > img { height: 48px; width: auto; max-width: 240px; border-radius: var(--radius-md); display: block; }
.footer-brand p { font-size: 14px; color: var(--text-muted); line-height: 1.6; margin-top: 12px; font-weight: var(--weight-normal); }
.footer-legal-ids { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.footer-sap,
.footer-siret { display: inline-block; font-size: 12px; font-weight: var(--weight-bold); color: var(--primary-blue); background: var(--primary-light); padding: 4px 12px; border-radius: var(--radius-pill); }
.footer-links h3, .footer-contact h3 { font-size: 16px; font-weight: var(--weight-bold); color: var(--text-dark); margin-bottom: 16px; }
.footer-links ul { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a, .footer-contact a { text-decoration: none; color: var(--text-muted); font-size: 14px; transition: color 0.3s; font-weight: var(--weight-medium); }
.footer-links a:hover, .footer-contact a:hover { color: var(--primary-blue); }
.footer-contact p { font-size: 14px; color: var(--text-muted); margin-bottom: 8px; font-weight: var(--weight-medium); }
.footer-bottom { border-top: 1px solid var(--border-soft); margin-top: 40px; padding-top: 20px; text-align: center; font-size: 13px; color: var(--text-muted); font-weight: var(--weight-normal); }
.footer-bottom a { color: var(--text-muted); text-decoration: none; }
.footer-bottom a:hover { color: var(--primary-blue); }
.footer-recaptcha-notice { font-size: 11px; margin-top: 8px; opacity: 0.7; }
@media (max-width: 1024px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
.site-footer { padding: 40px 0 90px; }
.footer-grid { grid-template-columns: 1fr; text-align: center; gap: 30px; }
.footer-brand > img { margin-left: auto; margin-right: auto; }
.footer-legal-ids { justify-content: center; }
.footer-bottom { margin-top: 30px; }
.container { width: min(1300px, 100% - 32px); }
.section-header { margin-bottom: 36px; }
}
.si-consent-overlay {
position: fixed;
inset: 0;
z-index: 9998;
background: rgba(6, 59, 109, 0.06);
opacity: 0;
pointer-events: none;
transition: opacity 0.5s ease;
}
.si-consent-overlay.visible {
opacity: 1;
pointer-events: auto;
}
.si-consent-popup {
position: fixed;
bottom: 24px;
left: 50%;
transform: translateX(-50%) translateY(20px) scale(0.96);
z-index: 9999;
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: 0 16px 56px rgba(6, 59, 109, 0.2);
border: 1px solid var(--border-soft);
padding: 22px 28px;
width: calc(100% - 32px);
max-width: 480px;
opacity: 0;
pointer-events: none;
transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.si-consent-popup.visible {
opacity: 1;
transform: translateX(-50%) translateY(0) scale(1);
pointer-events: auto;
}
.si-consent-popup.hiding {
opacity: 0;
transform: translateX(-50%) translateY(10px) scale(0.97);
pointer-events: none;
}
.si-consent-body {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 16px;
}
.si-consent-icon {
font-size: 36px;
line-height: 1;
flex-shrink: 0;
}
.si-consent-title {
font-size: 16px;
font-weight: var(--weight-bold);
color: var(--text-dark);
margin: 0 0 4px;
}
.si-consent-desc {
font-size: 13px;
color: var(--text-muted);
margin: 0;
line-height: 1.5;
}
.si-consent-actions {
display: flex;
gap: 10px;
align-items: center;
}
.si-consent-accept {
flex: 1;
padding: 13px 28px;
background: var(--primary-blue);
color: var(--surface);
border: none;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 15px;
font-weight: var(--weight-bold);
cursor: pointer;
transition: var(--transition);
letter-spacing: 0.01em;
box-shadow: 0 4px 14px rgba(12, 113, 195, 0.25);
}
.si-consent-accept:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(12, 113, 195, 0.35);
}
.si-consent-customize {
padding: 8px 14px;
background: transparent;
color: var(--text-muted);
border: none;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 12px;
font-weight: var(--weight-normal);
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
opacity: 0.7;
}
.si-consent-customize:hover {
color: var(--primary-blue);
opacity: 1;
}
.si-consent-details {
position: fixed;
inset: 0;
z-index: 10000;
background: rgba(6, 59, 109, 0.35);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.si-consent-details.visible {
opacity: 1;
pointer-events: auto;
}
.si-consent-details-inner {
background: var(--surface);
border-radius: var(--radius-xl);
box-shadow: 0 20px 60px rgba(6, 59, 109, 0.2);
max-width: 420px;
width: calc(100% - 32px);
padding: 28px;
transform: scale(0.95);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.si-consent-details.visible .si-consent-details-inner {
transform: scale(1);
}
.si-consent-details-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.si-consent-details-title {
font-size: 18px;
font-weight: var(--weight-bold);
color: var(--text-dark);
margin: 0;
}
.si-consent-details-close {
width: 32px;
height: 32px;
border: none;
background: var(--primary-light);
border-radius: 50%;
font-size: 18px;
color: var(--text-muted);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
}
.si-consent-details-close:hover {
background: var(--primary-blue);
color: var(--surface);
}
.si-consent-cats {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
.si-consent-cat {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 14px;
background: var(--bg-alt);
border-radius: var(--radius-lg);
border: 1px solid var(--border-soft);
cursor: pointer;
transition: var(--transition);
}
.si-consent-cat:hover {
border-color: var(--primary-blue);
}
.si-consent-cat-label {
font-size: 14px;
font-weight: var(--weight-medium);
color: var(--text-dark);
display: block;
}
.si-consent-cat-desc {
font-size: 12px;
color: var(--text-muted);
display: block;
margin-top: 2px;
}
.si-consent-switch {
position: relative;
width: 44px;
height: 24px;
flex-shrink: 0;
}
.si-consent-toggle {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.si-consent-slider {
position: absolute;
inset: 0;
background: #cbd5e1;
border-radius: 999px;
transition: var(--transition);
cursor: pointer;
}
.si-consent-slider::after {
content: "";
position: absolute;
top: 3px;
left: 3px;
width: 18px;
height: 18px;
background: var(--surface);
border-radius: 50%;
transition: var(--transition);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.si-consent-toggle:checked + .si-consent-slider {
background: var(--primary-blue);
}
.si-consent-toggle:checked + .si-consent-slider::after {
transform: translateX(20px);
}
.si-consent-toggle:disabled + .si-consent-slider {
opacity: 0.5;
cursor: not-allowed;
}
.si-consent-details-actions {
display: flex;
gap: 8px;
margin-bottom: 12px;
}
.si-consent-save {
flex: 1;
padding: 10px 20px;
background: var(--primary-blue);
color: var(--surface);
border: none;
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 14px;
font-weight: var(--weight-medium);
cursor: pointer;
transition: var(--transition);
}
.si-consent-save:hover {
background: var(--primary-dark);
}
.si-consent-deny {
padding: 10px 16px;
background: transparent;
color: var(--text-muted);
border: 1px solid var(--border-soft);
border-radius: var(--radius-pill);
font-family: inherit;
font-size: 13px;
font-weight: var(--weight-medium);
cursor: pointer;
transition: var(--transition);
white-space: nowrap;
}
.si-consent-deny:hover {
border-color: var(--text-muted);
color: var(--text-dark);
}
.si-consent-legal {
display: block;
text-align: center;
font-size: 12px;
color: var(--text-muted);
text-decoration: none;
}
.si-consent-legal:hover {
color: var(--primary-blue);
text-decoration: underline;
}
.si-consent-reopen {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9998;
width: 44px;
height: 44px;
border: 1px solid var(--border-soft);
background: var(--surface);
border-radius: 50%;
font-size: 20px;
cursor: pointer;
box-shadow: 0 4px 16px rgba(6, 59, 109, 0.1);
transition: var(--transition);
opacity: 0;
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
line-height: 1;
}
.si-consent-reopen.visible {
opacity: 1;
pointer-events: auto;
}
.si-consent-reopen:hover {
transform: scale(1.1);
box-shadow: 0 8px 24px rgba(12, 113, 195, 0.18);
border-color: var(--primary-blue);
}
@media (max-width: 640px) {
.si-consent-popup {
left: 50%;
right: auto;
bottom: 12px;
width: calc(100% - 24px);
max-width: none;
padding: 18px 20px;
}
.si-consent-details-inner {
padding: 20px;
max-height: 85vh;
overflow-y: auto;
}
.si-consent-reopen {
left: 12px;
right: auto;
bottom: 22px;
}
}
.form-error-banner {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
border-radius: var(--radius-md);
padding: 12px 16px;
margin-bottom: 20px;
font-size: 14px;
font-weight: var(--weight-medium);
}
.form-reassurance {
font-size: 13px;
color: var(--text-muted);
margin-top: 12px;
text-align: center;
}
.success-page {
padding: clamp(80px, 15vw, 150px) 0;
background: var(--bg-alt);
}
.success-icon {
font-size: 80px;
display: block;
margin-bottom: 20px;
}
.success-page h1 {
font-size: clamp(28px, 5vw, 40px);
color: var(--primary-dark);
}
.success-page p {
font-size: clamp(16px, 2.5vw, 20px);
color: var(--text-muted);
max-width: 600px;
margin: 20px auto;
}
.success-actions {
margin-top: 40px;
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.guarantees-section {
padding: 80px 0;
background: var(--bg-alt);
}
.guarantees-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
.guarantee-card {
background: var(--surface);
border-radius: var(--radius-xl);
padding: 32px 24px;
text-align: center;
box-shadow: var(--shadow-subtle);
}
.guarantee-icon {
font-size: 36px;
display: block;
margin-bottom: 12px;
}
.guarantee-card h3 {
font-size: 16px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
margin: 0 0 8px;
}
.guarantee-card p {
font-size: 14px;
color: var(--text-muted);
line-height: 1.5;
margin: 0;
}
@media (max-width: 768px) {
.guarantees-grid {
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
}
@media (max-width: 480px) {
.guarantees-grid {
grid-template-columns: 1fr;
gap: 16px;
}
.guarantee-card {
padding: 24px 20px;
}
}
.grecaptcha-badge {
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
position: fixed !important;
right: -9999px !important;
}
.services-hub-final-cta {
padding: 80px 0;
color: rgba(30, 41, 59, 0);
text-align: center;
position: relative;
overflow: hidden;
}
.services-hub-final-cta > .container {
position: relative;
z-index: 2;
}
.services-hub-final-cta .final-cta-buttons {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
margin-top: 24px;
}
@media (max-width: 640px) {
.services-hub-final-cta {
padding: 50px 0;
}
}
@media (prefers-reduced-motion: reduce) {
.btn-callback,
.btn-cta-green {
animation: none !important;
}
.nav-right .phone-link.btn-phone,
.nav-right .phone-link.btn-phone::before,
.nav-right .phone-link.btn-phone::after {
animation: none !important;
}
}
:root {
--si-contact-glass: rgba(255,255,255,0.2);
--si-contact-glass-dark: rgba(30,58,95,0.2);
--si-contact-ripple: rgba(0,0,0,0.1);
}
@media (prefers-color-scheme: dark) {
:root { --si-contact-glass: var(--si-contact-glass-dark); }
}
@media (prefers-reduced-motion: reduce) {
#si-contact-bar,
#si-contact-desktop,
.si-contact-icon,
.si-contact-icon img {
animation-duration: 0s !important;
transition-duration: 0s !important;
}
}
.si-contact-icon {
position: relative;
width: 44px;
height: 44px;
overflow: visible;
display: inline-flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
cursor: pointer;
transition: transform .2s ease;
-webkit-tap-highlight-color: transparent;
}
.si-contact-icon:hover { transform: scale(1.1); }
.si-contact-icon:active { transform: scale(0.9); }
.si-contact-icon img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 6px;
box-sizing: border-box;
transform: none;
object-fit: contain;
}
.si-contact-icon--phone img {
padding: 0;
}
.si-contact-icon--booking .si-cal {
position: absolute;
inset: 5px;
border: 2px solid var(--primary-blue);
border-radius: 6px;
background: #fff;
display: flex;
align-items: flex-end;
justify-content: center;
overflow: hidden;
box-sizing: border-box;
}
.si-contact-icon--booking .si-cal__top {
position: absolute;
top: 0; left: 0; right: 0;
height: 35%;
background: var(--primary-blue);
color: #ffffff;
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 9px;
font-weight: 800;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.si-contact-icon--booking .si-cal__day {
font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
font-size: 14px;
font-weight: 800;
line-height: 1;
color: var(--primary-blue);
padding-bottom: 2px;
}
.si-contact-icon--secondary {
opacity: 0.6;
transition: transform .2s ease, opacity .2s ease;
}
.si-contact-icon--secondary:hover { opacity: 1; }
.si-contact-icon--whatsapp {
opacity: 1;
}
.si-contact-ripple {
position: absolute;
border-radius: 50%;
background: var(--si-contact-ripple);
transform: scale(0);
animation: siContactRipple .6s linear;
pointer-events: none;
}
@keyframes siContactRipple { to { transform: scale(4); opacity: 0; } }
#si-contact-bar {
position: fixed;
bottom: 16px;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
height: 56px;
padding: 0 16px;
background: var(--si-contact-glass);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border-radius: 999px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
z-index: 9990;
animation: siContactFadeIn .8s both;
box-sizing: border-box;
}
@keyframes siContactFadeIn {
from { opacity: 0; transform: translate(-50%, 50px) scale(.8); }
to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
#si-contact-desktop { display: none; }
@media (min-width: 1024px) {
#si-contact-bar { display: none; }
#si-contact-desktop {
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
position: fixed;
top: 50%;
right: 24px;
transform: translateY(-50%);
padding: 16px;
background: var(--si-contact-glass);
backdrop-filter: blur(12px) saturate(150%);
-webkit-backdrop-filter: blur(12px) saturate(150%);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0,0,0,0.1);
z-index: 9990;
}
}
.si-modal--hidden { display: none !important; }
.si-whatsapp-soon { cursor: pointer; }
.si-modal__backdrop {
position: fixed;
inset: 0;
background: rgba(6, 59, 109, 0.18);
backdrop-filter: blur(8px) saturate(140%);
-webkit-backdrop-filter: blur(8px) saturate(140%);
z-index: 10000;
animation: siModalBackdropIn .3s ease both;
}
@keyframes siModalBackdropIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.si-modal__panel {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 92%;
max-width: 380px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid var(--border-soft, rgba(12,113,195,0.08));
border-radius: var(--radius-xl, 26px);
box-shadow:
0 25px 80px rgba(6, 59, 109, 0.18),
0 8px 32px rgba(12, 113, 195, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.8);
z-index: 10001;
padding: 32px 28px 28px;
text-align: center;
animation: siModalPanelIn .35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
overflow-y: auto;
max-height: 90vh;
}
@keyframes siModalPanelIn {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.92); }
to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.si-modal__close {
position: absolute;
top: 12px;
right: 12px;
z-index: 10;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--bg-alt, #f2f2f2);
border: none;
border-radius: 50%;
cursor: pointer;
transition: var(--transition, all .35s ease);
color: var(--text-muted, #64748b);
padding: 0;
}
.si-modal__close:hover {
background: var(--primary-light, #E6F3FC);
color: var(--primary-dark, #063B6D);
transform: rotate(90deg);
}
.si-modal__close svg {
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2.5;
fill: none;
}
.si-modal__icon {
width: 56px;
height: 56px;
margin: 0 auto 16px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--primary-blue, #0C71C3) 0%, var(--primary-dark, #063B6D) 100%);
box-shadow: 0 8px 24px rgba(12, 113, 195, 0.3);
}
.si-modal__icon svg {
width: 26px;
height: 26px;
stroke: white;
stroke-width: 2;
fill: none;
}
.si-modal__icon--green {
background: linear-gradient(135deg, var(--success-green, #16a34a) 0%, #0d7a35 100%);
box-shadow: 0 8px 24px rgba(22, 163, 74, 0.3);
}
.si-modal__icon--whatsapp {
background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}
.si-modal__icon--email {
background: linear-gradient(135deg, var(--primary-blue, #0C71C3) 0%, #4f46e5 100%);
box-shadow: 0 8px 24px rgba(79, 70, 229, 0.25);
}
.si-modal__title {
margin: 0 0 4px;
font-size: 22px;
font-weight: var(--weight-extra, 800);
color: var(--primary-dark, #063B6D);
letter-spacing: -0.02em;
}
.si-modal__subtitle {
margin: 0 0 20px;
font-size: 14px;
color: var(--text-muted, #64748b);
font-weight: var(--weight-normal, 500);
line-height: 1.5;
}
.si-modal__body {
display: flex;
flex-direction: column;
gap: 10px;
}
.si-modal__avail {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 13px;
font-weight: var(--weight-medium, 600);
color: var(--success-green, #16a34a);
margin-bottom: 4px;
}
.si-modal__avail-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--success-green, #16a34a);
animation: siModalPulse 2s ease-in-out infinite;
}
@keyframes siModalPulse {
0%, 100% { opacity: 1; transform: scale(1); }
50%      { opacity: 0.5; transform: scale(1.4); }
}
.si-modal__action {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 14px 24px;
border-radius: var(--radius-pill, 999px);
text-decoration: none;
font-family: inherit;
font-size: 15px;
font-weight: var(--weight-bold, 700);
cursor: pointer;
transition: all .25s cubic-bezier(0.34, 1.56, 0.64, 1);
border: none;
white-space: nowrap;
}
.si-modal__action svg {
width: 18px;
height: 18px;
flex-shrink: 0;
}
.si-modal__action--call {
background: linear-gradient(135deg, var(--primary-blue, #0C71C3) 0%, var(--primary-dark, #063B6D) 100%);
color: white;
box-shadow: 0 6px 20px rgba(12, 113, 195, 0.35);
}
.si-modal__action--call:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(12, 113, 195, 0.45);
filter: brightness(1.08);
}
.si-modal__action--call svg { stroke: white; fill: none; stroke-width: 2; }
.si-modal__action--callback {
background: var(--success-green, #16a34a);
color: white;
box-shadow: 0 6px 20px rgba(22, 163, 74, 0.3);
animation: siModalActionPulse 3s ease-in-out infinite;
}
.si-modal__action--callback:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(22, 163, 74, 0.4);
background: color-mix(in srgb, var(--success-green, #16a34a) 85%, black);
}
.si-modal__action--callback svg { stroke: white; fill: none; stroke-width: 2; }
@keyframes siModalActionPulse {
0%, 100% { box-shadow: 0 6px 20px rgba(22, 163, 74, 0.3); }
50%      { box-shadow: 0 8px 28px rgba(22, 163, 74, 0.45); }
}
.si-modal__action--glass {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1.5px solid rgba(12, 113, 195, 0.15);
color: var(--primary-dark, #063B6D);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.si-modal__action--glass:hover {
background: white;
border-color: var(--primary-blue, #0C71C3);
color: var(--primary-blue, #0C71C3);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(12, 113, 195, 0.12);
}
.si-modal__action--glass svg { stroke: var(--primary-blue, #0C71C3); fill: none; stroke-width: 2; }
.si-modal__sep {
display: flex;
align-items: center;
gap: 12px;
margin: 2px 0;
font-size: 13px;
color: var(--text-muted, #64748b);
font-weight: var(--weight-medium, 600);
}
.si-modal__sep::before,
.si-modal__sep::after {
content: "";
flex: 1;
height: 1px;
background: var(--border, rgba(12,113,195,0.14));
}
.si-modal__badges {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 8px;
}
.si-modal__badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 12px;
font-weight: var(--weight-medium, 600);
color: var(--text-muted, #64748b);
opacity: 0.8;
}
.si-modal__badge svg {
width: 14px;
height: 14px;
stroke: var(--primary-blue, #0C71C3);
fill: none;
stroke-width: 2;
}
.si-modal__alt {
margin-top: 6px;
font-size: 13px;
color: var(--text-muted, #64748b);
}
.si-modal__alt a {
color: var(--primary-blue, #0C71C3);
font-weight: var(--weight-bold, 700);
text-decoration: none;
}
.si-modal__alt a:hover {
text-decoration: underline;
}
.si-modal--callback .si-modal__panel {
max-width: 420px;
text-align: left;
padding: 32px 24px 24px;
}
.si-modal--callback .si-modal__title {
text-align: center;
margin-bottom: 6px;
}
.si-modal--callback .si-modal__subtitle {
text-align: center;
margin: 0 0 14px;
}
.si-modal--callback .cbf-form {
margin: 0;
}
.si-modal--callback .cbf-badges {
justify-content: center;
margin-top: 6px;
gap: 10px 14px;
}
.si-modal--callback .cbf-reassurance {
text-align: center;
margin-top: 8px;
}
.si-modal--callback .cbf-assistant-note {
margin-top: 6px !important;
}
.si-modal__icon--booking {
background: var(--primary-light);
color: var(--primary-blue);
}
.si-modal__icon--booking svg {
stroke: var(--primary-blue);
fill: none;
stroke-width: 2;
}
.si-modal--booking .si-modal__panel {
max-width: 520px;
width: min(520px, 96vw);
max-height: 90vh;
overflow-y: auto;
text-align: left;
padding: 28px 20px 20px;
}
.si-modal--booking .si-modal__title {
text-align: center;
margin-bottom: 6px;
}
.si-modal--booking .si-modal__subtitle {
text-align: center;
margin: 0 0 10px;
}
.si-modal--booking .si-booking-widget {
max-width: none;
margin: 0;
}
.si-modal--booking .si-bw-inner {
box-shadow: none;
}
.si-modal--booking .si-bw-header {
display: none;
}
.si-modal--booking .si-bw-step[data-step="3"] .si-bw-step-header {
margin-bottom: 12px;
}
.si-modal--booking .si-bw-step[data-step="3"] .si-bw-form-group {
margin-bottom: 12px;
}
.si-modal--booking .si-bw-step[data-step="3"] textarea {
min-height: 72px;
}
.si-modal--booking:has(.si-booking-widget[data-bw-compact="1"]) {
align-items: flex-start;
padding-top: 8px;
}
.si-modal--booking:has(.si-booking-widget[data-bw-compact="1"]) .si-modal__icon {
display: none;
}
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-modal__icon,
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-modal__title,
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-modal__subtitle {
display: none;
}
.si-modal--booking:has(.si-booking-widget[data-bw-compact="1"]) .si-modal__panel {
padding-top: 44px;
padding-bottom: 12px;
}
.si-modal--booking:has(.si-booking-widget[data-bw-compact="1"]) .si-modal__close {
top: 10px;
right: 10px;
}
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-modal__panel {
top: 50%;
display: flex;
flex-direction: column;
justify-content: center;
padding-top: 48px;
padding-bottom: 24px;
height: auto;
max-height: none;
overflow: hidden;
}
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-booking-widget {
flex: 0 0 auto;
}
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-bw-inner,
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-bw-body {
overflow: visible;
min-height: 0;
}
@media (max-width: 480px) {
.si-modal__panel {
width: 96%;
padding: 24px 18px 20px;
border-radius: var(--radius-lg, 18px);
}
.si-modal--callback .si-modal__panel {
padding: 20px 16px 16px;
top: 48%;
max-height: calc(100dvh - 20px);
}
.si-modal--callback .si-modal__icon {
width: 44px;
height: 44px;
margin-bottom: 8px;
}
.si-modal--callback .si-modal__title {
font-size: 18px;
margin-bottom: 2px;
}
.si-modal--callback .si-modal__subtitle {
margin-bottom: 10px;
font-size: 13px;
line-height: 1.35;
}
.si-modal--callback .cbf-civility-group {
margin-bottom: 8px;
}
.si-modal--callback .cbf-reassurance {
margin-top: 6px;
}
.si-modal--callback .cbf-badges {
margin-top: 4px;
gap: 6px 10px;
}
.si-modal--callback .cbf-assistant-note {
margin-top: 4px !important;
font-size: 0.72rem !important;
line-height: 1.3 !important;
}
.si-modal--booking .si-modal__panel {
padding: 18px 16px 12px;
top: 48%;
max-height: calc(100dvh - 16px);
}
.si-modal--booking .si-modal__icon {
width: 44px;
height: 44px;
margin-bottom: 6px;
}
.si-modal--booking .si-modal__title {
font-size: 18px;
margin-bottom: 2px;
}
.si-modal--booking .si-modal__subtitle {
margin-bottom: 8px;
font-size: 13px;
line-height: 1.35;
}
.si-modal--booking .si-bw-inner {
overflow: visible;
border-radius: 0;
box-shadow: none;
}
.si-modal--booking .si-bw-body {
overflow: hidden;
border-radius: 12px;
background: var(--surface);
}
.si-modal--booking .si-bw-step {
padding-top: 12px;
padding-bottom: 12px;
}
.si-modal--booking:has(.si-booking-widget[data-bw-compact="1"]) .si-modal__panel {
padding-top: 40px;
padding-bottom: 10px;
max-height: calc(100dvh - 16px);
}
.si-modal--booking:has(.si-booking-widget[data-bw-confirm="1"]) .si-modal__panel {
top: 50%;
padding-top: 44px;
padding-bottom: 20px;
height: auto;
max-height: none;
overflow: hidden;
}
.si-modal__icon {
width: 48px;
height: 48px;
margin-bottom: 12px;
}
.si-modal__icon svg {
width: 22px;
height: 22px;
}
.si-modal__title {
font-size: 20px;
}
.si-modal__action {
padding: 13px 20px;
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.si-modal__backdrop,
.si-modal__panel,
.si-modal__close,
.si-modal__action,
.si-modal__avail-dot {
animation: none !important;
transition: none !important;
}
}
@keyframes siContactPhoneRing {
0% { transform: scale(1) rotate(0deg); }
5% { transform: scale(1.25) rotate(-8deg); }
8% { transform: scale(1.3) rotate(8deg); }
11% { transform: scale(1.25) rotate(-5deg); }
14% { transform: scale(1.2) rotate(3deg); }
17% { transform: scale(1.1) rotate(0deg); }
20%, 25% { transform: scale(1) rotate(0deg); }
28% { transform: scale(1.25) rotate(-8deg); }
31% { transform: scale(1.3) rotate(8deg); }
34% { transform: scale(1.25) rotate(-5deg); }
37% { transform: scale(1.2) rotate(3deg); }
40% { transform: scale(1.1) rotate(0deg); }
45%, 100% { transform: scale(1) rotate(0deg); }
}
@keyframes siContactWaveRing1 {
0%, 4% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
5% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
17% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
18%, 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
@keyframes siContactWaveRing2 {
0%, 27% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
28% { transform: translate(-50%, -50%) scale(0); opacity: 1; }
40% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
41%, 100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}
.si-contact-icon--phone {
position: relative;
animation: siContactPhoneRing 3s ease-in-out infinite;
transform-origin: center;
}
.si-contact-icon--phone::before {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 48px; height: 48px;
border: 2px solid rgba(12, 113, 195, 0.7);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: siContactWaveRing1 3s ease-out infinite;
pointer-events: none;
z-index: -1;
}
.si-contact-icon--phone::after {
content: '';
position: absolute;
top: 50%; left: 50%;
width: 48px; height: 48px;
border: 2px solid rgba(12, 113, 195, 0.5);
border-radius: 50%;
transform: translate(-50%, -50%) scale(0);
animation: siContactWaveRing2 3s ease-out infinite;
pointer-events: none;
z-index: -1;
}
.si-contact-icon--phone:hover {
transform: none;
}
body.has-si-contact .si-consent-popup {
bottom: 84px;
}
body.has-si-contact .si-consent-reopen {
bottom: 84px;
}
@media (min-width: 1024px) {
body.has-si-contact .si-consent-popup {
bottom: 24px;
}
body.has-si-contact .si-consent-reopen {
bottom: 20px;
}
}
@media (max-width: 640px) {
body.has-si-contact .si-consent-popup {
bottom: 80px;
}
body.has-si-contact .si-consent-reopen {
left: 12px;
right: auto;
bottom: 22px;
}
}
.cbf-availability {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
font-size: 13px;
font-weight: var(--weight-medium);
color: var(--success-green);
margin-bottom: 10px;
white-space: nowrap;
}
.cbf-availability-dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--success-green-light);
border-radius: 50%;
animation: cbf-pulse-green 2s ease-in-out infinite;
}
@keyframes cbf-pulse-green {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.5); opacity: 0.5; }
}
.cbf-error-banner {
background: var(--error-bg);
color: var(--error-red-dark);
border: 1px solid var(--error-border);
border-radius: var(--radius-md);
padding: 12px 16px;
font-size: 14px;
margin-bottom: 16px;
text-align: center;
}
.cbf-civility-group {
margin-bottom: 16px;
text-align: left;
}
.cbf-civility-toggle {
display: flex;
gap: 10px;
}
.cbf-civility-option {
flex: 1;
position: relative;
cursor: pointer;
}
.cbf-civility-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.cbf-civility-option span {
display: block;
text-align: center;
padding: 11px 16px;
border: 2px solid #cbd5e1;
border-radius: var(--radius-md);
font-family: inherit;
font-size: 16px;
font-weight: var(--weight-medium);
color: var(--text-dark);
background: rgba(230, 243, 252, 0.3);
transition: all 0.2s ease;
user-select: none;
}
.cbf-civility-option:hover span {
border-color: var(--primary-blue);
color: var(--primary-blue);
background: var(--surface);
}
.cbf-civility-option input[type="radio"]:checked + span {
border-color: var(--primary-blue);
background: var(--primary-blue);
color: white;
box-shadow: 0 2px 8px rgba(12, 113, 195, 0.25);
}
.cbf-civility-option input[type="radio"]:focus-visible + span {
box-shadow: 0 0 0 4px rgba(12, 113, 195, 0.15);
}
.cbf-civility-group .cbf-field-error {
display: block;
font-size: 13px;
color: var(--error-red);
margin-top: 4px;
font-weight: var(--weight-normal);
min-height: 17px;
visibility: visible;
}
.cbf-civility-group .cbf-field-error:empty {
visibility: hidden;
}
.cbf-civility-option.cbf-civ-invalid span {
border-color: var(--error-red);
animation: cbf-shake 0.3s ease;
}
.cbf-fields {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: flex-end;
text-align: left;
}
.cbf-group {
flex: 1;
min-width: 180px;
}
.cbf-group label {
display: block;
font-size: 14px;
font-weight: var(--weight-medium);
color: var(--text-dark);
margin-bottom: 6px;
}
.cbf-group input {
width: 100%;
padding: 12px 16px 12px 42px;
border: 1.5px solid rgba(12, 113, 195, 0.25);
border-radius: 14px;
font-size: 15px;
font-family: inherit;
transition: var(--transition);
background: rgba(230, 243, 252, 0.3);
color: var(--text-dark);
box-sizing: border-box;
}
.cbf-group input:focus {
outline: none;
border-color: var(--primary-blue);
box-shadow: 0 0 0 4px rgba(12, 113, 195, 0.1);
}
.cbf-input-wrap {
position: relative;
}
.cbf-input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
color: var(--primary-blue);
opacity: 0.5;
pointer-events: none;
transition: opacity 0.3s ease;
}
.cbf-input-wrap input:focus ~ .cbf-input-icon,
.cbf-input-wrap:focus-within .cbf-input-icon {
opacity: 1;
}
.cbf-fields .cbf-field-error {
display: block;
font-size: 13px;
line-height: 1.3;
color: var(--error-red);
margin-top: 4px;
font-weight: var(--weight-normal);
min-height: 17px;
visibility: visible;
}
.cbf-fields .cbf-field-error:empty {
visibility: hidden;
}
.cbf-fields input.cbf-invalid {
border-color: var(--error-red);
animation: cbf-shake 0.3s ease;
}
@keyframes cbf-shake {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
.cbf-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
white-space: nowrap;
flex-basis: 100%;
background: var(--success-green);
color: white;
padding: 16px 32px;
border-radius: var(--radius-pill);
font-weight: var(--weight-bold);
font-size: 17px;
border: none;
cursor: pointer;
font-family: inherit;
box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
transition: all 0.25s ease;
}
.cbf-submit:hover {
background: color-mix(in srgb, var(--success-green) 85%, black);
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(22, 163, 74, 0.45);
}
.cbf-submitting {
opacity: 0.75;
cursor: not-allowed;
pointer-events: none;
}
.cbf-spinner {
display: inline-block;
width: 18px;
height: 18px;
border: 3px solid rgba(255, 255, 255, 0.35);
border-top-color: white;
border-radius: 50%;
animation: cbf-spin 0.65s linear infinite;
vertical-align: middle;
margin-right: 6px;
}
@keyframes cbf-spin {
to { transform: rotate(360deg); }
}
.cbf-reassurance {
margin-top: 16px;
font-size: 12px;
color: var(--text-muted);
text-align: center;
}
.cbf-badges {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
margin-top: 16px;
}
.cbf-reassurance + .cbf-badges {
margin-top: 8px;
}
.cbf-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12px;
font-weight: var(--weight-medium);
color: var(--primary-blue);
opacity: 0.7;
}
.cbf-badge svg {
flex-shrink: 0;
}
@media (max-width: 768px) {
.cbf-fields {
flex-direction: column;
}
.cbf-group {
min-width: 0;
width: 100%;
}
.cbf-group label {
text-align: center;
}
.cbf-submit {
width: 100%;
font-size: 16px;
padding: 14px 24px;
}
.cbf-input-icon {
width: 16px;
height: 16px;
}
}
@media (max-width: 640px) {
.cbf-civility-option span {
padding: 10px 12px;
font-size: 15px;
}
}
@media (max-width: 540px) {
.cbf-fields {
gap: 8px;
}
.cbf-civility-group {
margin-bottom: 10px;
}
.cbf-field-error:empty {
display: none;
min-height: 0;
}
.cbf-reassurance {
margin-top: 10px;
}
}
.hero-image-frame {
position: relative;
width: 100%;
max-width: 560px;
justify-self: center;
}
.hero-image-frame::before {
content: "";
position: absolute;
inset: -24px;
background:
radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--primary-blue) 18%, transparent), transparent 55%),
radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--primary-blue) 14%, transparent), transparent 55%);
border-radius: var(--radius-xl);
z-index: 0;
filter: blur(8px);
}
.hero-image-frame > img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--radius-lg);
box-shadow:
0 18px 50px color-mix(in srgb, var(--text-dark) 16%, transparent),
0 4px 12px color-mix(in srgb, var(--primary-blue) 10%, transparent);
background: var(--surface);
}
@media (max-width: 900px) {
.hero-image-frame {
max-width: 480px;
margin: 0 auto;
}
}
@media (max-width: 640px) {
.hero-image-frame {
width: min(100%, 360px);
max-width: 100%;
}
.hero-image-frame::before {
inset: -12px;
filter: blur(6px);
}
.hero-image-frame > img {
border-radius: var(--radius-md);
box-shadow:
0 8px 24px color-mix(in srgb, var(--text-dark) 14%, transparent),
0 2px 6px color-mix(in srgb, var(--primary-blue) 8%, transparent);
}
}
@keyframes wizz-attention-shake {
0%, 100% {
transform: translateX(0) scale(1);
}
8% {
transform: translateX(-9px) scale(1.01);
}
18% {
transform: translateX(8px) scale(1.015);
}
28% {
transform: translateX(-6px) scale(1.02);
}
38% {
transform: translateX(5px) scale(1.025);
}
48% {
transform: translateX(-4px) scale(1.025);
}
58% {
transform: translateX(3px) scale(1.02);
}
70% {
transform: translateX(-2px) scale(1.015);
}
82% {
transform: translateX(1px) scale(1.01);
}
}
@keyframes wizz-attention-glow {
0%, 100% {
box-shadow:
0 0 0 0 rgba(12, 113, 195, 0),
0 4px 12px rgba(15, 23, 42, 0.06);
}
30% {
box-shadow:
0 0 0 6px rgba(12, 113, 195, 0.28),
0 18px 38px rgba(12, 113, 195, 0.32);
}
60% {
box-shadow:
0 0 0 10px rgba(12, 113, 195, 0.14),
0 22px 44px rgba(12, 113, 195, 0.28);
}
}
@keyframes wizz-attention-glow-green {
0%, 100% {
box-shadow:
0 0 0 0 rgba(34, 197, 94, 0),
0 4px 12px rgba(15, 23, 42, 0.06);
}
30% {
box-shadow:
0 0 0 6px rgba(34, 197, 94, 0.32),
0 18px 38px rgba(22, 163, 74, 0.34);
}
60% {
box-shadow:
0 0 0 10px rgba(34, 197, 94, 0.16),
0 22px 44px rgba(22, 163, 74, 0.30);
}
}
.wizz-attention {
animation:
wizz-attention-shake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
wizz-attention-glow 1.1s ease-out both;
transform-origin: center center;
will-change: transform, box-shadow;
border-radius: var(--radius-lg, 16px);
position: relative;
z-index: 5;
}
.wizz-attention.wizz-attention--green {
animation:
wizz-attention-shake 1.1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both,
wizz-attention-glow-green 1.1s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.wizz-attention {
animation: wizz-attention-glow 0.6s ease-out both;
}
.wizz-attention.wizz-attention--green {
animation: wizz-attention-glow-green 0.6s ease-out both;
}
}
.booking-highlight {
padding: 28px 0;
}
.booking-highlight-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
padding: 28px 32px;
border-radius: var(--radius-xl);
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%);
color: var(--surface);
box-shadow: var(--shadow-card);
}
.booking-highlight-body {
flex: 1 1 320px;
min-width: 0;
}
.booking-highlight-eyebrow {
display: inline-block;
font-size: 13px;
font-weight: var(--weight-bold);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--surface);
background: rgba(255, 255, 255, 0.16);
padding: 5px 12px;
border-radius: var(--radius-pill);
margin-bottom: 12px;
}
.booking-highlight-title {
margin: 0;
color: var(--surface);
font-size: clamp(20px, 2.4vw, 26px);
font-weight: var(--weight-extra);
line-height: 1.2;
}
.booking-highlight-text {
margin: 8px 0 0;
color: var(--surface);
font-weight: var(--weight-normal);
font-size: 15px;
line-height: 1.5;
opacity: 0.92;
max-width: 60ch;
}
.booking-highlight-action {
flex: 0 0 auto;
}
.booking-highlight-cta.btn-primary {
background: var(--surface);
color: var(--primary-dark);
box-shadow: 0 10px 30px rgba(6, 59, 109, 0.35);
font-weight: var(--weight-bold);
}
.booking-highlight-cta.btn-primary:hover {
background: var(--primary-light);
color: var(--primary-dark);
filter: none;
}
@media (max-width: 640px) {
.booking-highlight-card {
flex-direction: column;
align-items: flex-start;
padding: 24px 22px;
text-align: left;
}
.booking-highlight-action {
width: 100%;
}
.booking-highlight-cta.btn-primary {
width: 100%;
}
}
:root {
--bg-alt: transparent;
}
body {
background-color: transparent;
}
#tsparticles {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--bg-alt-solid);
z-index: -1;
pointer-events: none;
}
#tsparticles canvas {
pointer-events: none !important;
}
.si-consent-cat,
.civility-option,
.address-clear {
background: var(--bg-alt-solid) !important;
}
section:has(+ section.bg-alt)::after {
background: linear-gradient(to bottom, transparent, var(--bg-alt-solid)) !important;
}
@media (max-width: 768px) {
#tsparticles {
display: none !important;
}
:root {
--bg-alt: var(--bg-alt-solid);
}
body {
background-color: var(--bg-alt-solid);
}
}
.landing-urgency-bar {
display: block;
background: var(--primary-dark);
color: white;
text-align: center;
padding: 10px 0;
font-size: 14px;
font-weight: var(--weight-medium);
letter-spacing: 0.3px;
position: sticky;
top: 0;
z-index: 1001;
text-decoration: none;
transition: background-color 0.2s ease;
}
.landing-urgency-bar:hover {
background: var(--primary-blue);
color: white;
}
body:has(.landing-urgency-bar) #nav-wrapper {
top: 54px;
}
.landing-urgency-bar .container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.urgency-pulse {
display: inline-block;
width: 10px;
height: 10px;
background: #22c55e;
border-radius: 50%;
animation: pulse-green 2s ease-in-out infinite;
flex-shrink: 0;
}
.urgency-text-wrap {
min-width: 0;
overflow: hidden;
}
.urgency-text {
display: inline-block;
white-space: nowrap;
}
.landing-urgency-bar .urgency-text-short {
display: none;
}
.urgency-cta {
display: inline-flex;
align-items: center;
gap: 6px;
flex-shrink: 0;
background: #fff;
color: var(--primary-dark);
font-weight: var(--weight-bold);
font-size: 13px;
line-height: 1;
padding: 6px 12px;
border-radius: 999px;
white-space: nowrap;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.urgency-cta-chevron {
flex-shrink: 0;
animation: urgency-nudge 1.8s ease-in-out infinite;
}
.landing-urgency-bar:hover .urgency-cta {
background: var(--primary-light);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
@keyframes pulse-green {
0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
@keyframes urgency-nudge {
0%, 100% { transform: translateX(0); }
50% { transform: translateX(3px); }
}
@keyframes urgency-marquee {
from { transform: translateX(0); }
to { transform: translateX(var(--marquee-shift, 0)); }
}
@media (max-width: 640px) {
.landing-urgency-bar {
font-size: 11px;
padding: 8px 12px;
line-height: 1.35;
}
body:has(.landing-urgency-bar) #nav-wrapper {
top: 44px;
}
.landing-urgency-bar .container {
gap: 8px;
flex-wrap: nowrap;
justify-content: space-between;
}
.urgency-text-wrap {
flex: 1 1 auto;
}
.landing-urgency-bar .urgency-prefix {
display: none;
}
.landing-urgency-bar .urgency-text-full {
display: none;
}
.landing-urgency-bar .urgency-text-short {
display: inline;
}
.landing-urgency-bar.is-overflowing .urgency-text {
animation: urgency-marquee 9s ease-in-out infinite alternate;
}
.urgency-cta {
font-size: 11px;
padding: 5px 10px;
gap: 4px;
}
.urgency-cta-chevron {
width: 12px;
height: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
.urgency-pulse,
.urgency-cta-chevron {
animation: none;
}
.landing-urgency-bar.is-overflowing .urgency-text {
animation: none;
}
@media (max-width: 640px) {
.urgency-text {
display: block;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
}
}
.hero-copy-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content {
max-width: 720px;
}
.hero-copy-standard .hero-sap-seal,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
max-width: 420px;
margin: 0 0 14px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid color-mix(in srgb, var(--primary-blue) 18%, transparent);
background: var(--primary-light);
box-shadow: var(--shadow-card);
text-decoration: none;
color: inherit;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.hero-copy-standard .hero-sap-seal--before-cta,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal--before-cta {
margin: 8px 0 0;
}
@media (min-width: 901px) {
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal--before-cta {
margin-bottom: 18px;
}
}
.hero-copy-standard .hero-sap-seal:hover,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal:hover {
border-color: color-mix(in srgb, var(--primary-blue) 32%, transparent);
box-shadow: 0 10px 24px rgba(12, 113, 195, 0.14);
transform: translateY(-1px);
}
.hero-copy-standard .hero-sap-seal-logo-wrap,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-logo-wrap {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 76px;
width: 76px;
min-height: 64px;
}
.hero-copy-standard .hero-sap-seal-logo,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-logo {
display: block;
width: auto;
max-width: 76px;
height: 58px;
object-fit: contain;
}
.hero-copy-standard .hero-sap-seal-copy,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-copy {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: 2px;
flex: 1;
min-width: 0;
text-align: left;
}
.hero-copy-standard .hero-sap-seal-title,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-title {
font-size: 14px;
font-weight: var(--weight-extra);
line-height: 1.25;
color: var(--primary-dark);
}
.hero-copy-standard .hero-sap-seal-subtitle,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-subtitle {
font-size: 14px;
font-weight: var(--weight-bold);
line-height: 1.25;
color: var(--primary-blue);
white-space: normal;
max-width: 100%;
text-wrap: balance;
}
.hero-copy-standard .hero-sap-seal-text,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-text {
font-size: 13px;
font-weight: var(--weight-bold);
line-height: 1.35;
color: var(--primary-dark);
text-align: left;
}
.hero-copy-standard .hero-badge,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-badge {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 6px 16px;
background: var(--primary-light);
color: var(--primary-blue);
font-size: 11px;
font-weight: var(--weight-extra);
line-height: 1;
letter-spacing: 2px;
border-radius: var(--radius-pill);
border: 1px solid color-mix(in srgb, var(--primary-blue) 10%, transparent);
text-transform: uppercase;
}
.hero-copy-standard h1:not(.page-hero-ref-title-on-image):not(.page-hero-ref-title-desktop),
.landing-hero:not(.landing-hero--pricing) .landing-hero-content h1 {
font-size: clamp(38px, 5.6vw, 64px);
font-weight: var(--weight-black);
color: var(--primary-dark);
letter-spacing: -0.055em;
line-height: 0.98;
max-width: 780px;
margin: 0 0 18px;
text-wrap: balance;
}
.hero-copy-standard h1:not(.page-hero-ref-title-on-image) span,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content h1 span {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: var(--weight-extra);
display: inline;
}
.hero-copy-standard .hero-subtitle-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-subtitle {
display: block;
max-width: 680px;
margin: 0 0 18px;
color: var(--primary-blue);
font-size: clamp(17px, 2vw, 21px);
font-weight: var(--weight-bold);
line-height: 1.45;
letter-spacing: normal;
}
.hero-copy-standard .hero-intro-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-text {
display: block;
max-width: 680px;
margin: 0 0 28px;
color: var(--text-muted);
font-size: clamp(16px, 1.7vw, 18px);
font-weight: var(--weight-normal);
line-height: 1.7;
}
@media (max-width: 1024px) {
.hero-copy-standard h1:not(.page-hero-ref-title-on-image):not(.page-hero-ref-title-desktop),
.landing-hero:not(.landing-hero--pricing) .landing-hero-content h1 {
font-size: clamp(32px, 3.6vw, 36px);
}
}
@media (max-width: 900px) {
.hero-copy-standard .hero-sap-seal,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal {
margin-left: auto;
margin-right: auto;
}
.hero-copy-standard .hero-sap-seal-subtitle,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-subtitle {
font-size: 12px;
line-height: 1.3;
}
.hero-copy-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content,
.hero-copy-standard .hero-subtitle-standard,
.hero-copy-standard .hero-intro-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-subtitle,
.landing-hero:not(.landing-hero--pricing) .landing-hero-text {
max-width: none;
}
.hero-copy-standard .hero-intro-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-text {
margin-inline: auto;
}
}
@media (max-width: 640px) {
.hero-copy-standard .hero-intro-standard,
.landing-hero:not(.landing-hero--service):not(.landing-hero--pricing) .landing-hero-text {
display: none !important;
}
.hero-copy-standard h1:not(.page-hero-ref-title-on-image):not(.page-hero-ref-title-desktop),
.landing-hero:not(.landing-hero--pricing) .landing-hero-content h1 {
margin: 4px 0 12px;
}
.hero-copy-standard h1[data-hero-dynamic],
.landing-hero:not(.landing-hero--pricing) .landing-hero-content h1[data-hero-dynamic] {
font-size: clamp(24px, 6.8vw, 30px);
line-height: 1.12;
letter-spacing: -0.035em;
}
.hero-copy-standard h1[data-hero-dynamic] .hero-title-slot,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content h1[data-hero-dynamic] .hero-title-slot {
font-size: 0.92em;
font-weight: var(--weight-bold);
}
.hero-copy-standard .hero-badge,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-badge {
line-height: 1.25;
white-space: normal;
}
.hero-copy-standard .hero-sap-seal,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal {
max-width: none;
padding: 6px 10px;
gap: 8px;
margin: 4px 0 12px;
}
.hero-copy-standard .hero-sap-seal-logo-wrap,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-logo-wrap {
flex-basis: 48px;
width: 48px;
min-height: 40px;
}
.hero-copy-standard .hero-sap-seal-logo,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-logo {
max-width: 48px;
height: 40px;
}
.hero-copy-standard .hero-sap-seal-title,
.landing-hero:not(.landing-hero--pricing) .landing-hero-content .hero-sap-seal-title {
font-size: 13px;
}
.hero-copy-standard .hero-subtitle-standard,
.landing-hero:not(.landing-hero--pricing) .landing-hero-subtitle {
font-size: 16px;
}
}
.hero-section-ref {
padding: var(--hero-padding-top-mobile) 0 var(--hero-padding-bottom-mobile);
}
@media (min-width: 901px) {
.hero-section-ref {
padding-top: var(--hero-padding-top-desktop);
padding-bottom: var(--hero-padding-bottom-desktop);
}
}
@media (max-width: 640px) {
.hero-section-ref .hero-copy-standard > h1:first-child,
.hero-section-ref .hero-copy-standard > .page-hero-ref-title-desktop:first-child {
margin: 0 0 12px;
}
}
.hero-copy-standard .hero-reassurance {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-bottom: 20px;
max-width: 520px;
}
.hero-copy-standard .hero-reassurance-top {
margin-top: 4px;
margin-bottom: 14px;
}
.hero-copy-standard .hero-reassurance-bottom {
margin-top: 4px;
}
.hero-copy-standard .hero-reassurance .mini-badge {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
text-align: center;
line-height: 1.35;
padding: 8px 12px;
font-size: 13px;
}
.hero-copy-standard .hero-reassurance .mini-badge--highlight {
font-size: 14px;
font-weight: var(--weight-bold);
border-color: color-mix(in srgb, var(--primary-blue) 35%, var(--border-soft));
background: color-mix(in srgb, var(--primary-light) 88%, var(--surface));
color: var(--primary-dark);
}
.hero-copy-standard .hero-reassurance .mini-badge--highlight:has(.mini-badge__google-reviews) {
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
}
.hero-copy-standard .mini-badge__line--short {
display: none;
}
.hero-copy-standard .mini-badge__google-reviews {
display: none;
align-items: center;
gap: 3px;
flex-flow: row nowrap;
white-space: nowrap;
max-width: 100%;
line-height: 1;
}
.hero-copy-standard .mini-badge__google-g {
flex: 0 0 auto;
width: 14px;
height: 14px;
display: block;
}
.hero-copy-standard .mini-badge__google-count {
font-weight: var(--weight-bold);
flex-shrink: 0;
}
.hero-copy-standard .mini-badge__google-stars {
color: var(--review-star-gold);
letter-spacing: -0.05em;
font-size: 11px;
line-height: 1;
flex-shrink: 0;
}
@media (max-width: 900px) {
.hero-copy-standard .hero-reassurance {
margin-left: auto;
margin-right: auto;
}
}
@media (max-width: 640px) {
.hero-copy-standard .hero-reassurance {
gap: 6px;
margin-bottom: 16px;
}
.hero-copy-standard .hero-reassurance-top {
gap: 8px;
margin-top: 0;
margin-bottom: 12px;
max-width: none;
grid-template-columns: auto minmax(0, 1fr);
align-items: stretch;
}
.hero-copy-standard .hero-reassurance-top .mini-badge {
padding: 8px 10px;
font-size: 12px;
min-width: 0;
}
.hero-copy-standard .hero-reassurance-top .mini-badge--highlight:has(.mini-badge__google-reviews) {
width: fit-content;
max-width: 100%;
justify-self: start;
padding: 8px 10px;
}
.hero-copy-standard .hero-reassurance-top .mini-badge:not(.mini-badge--highlight) {
white-space: nowrap;
justify-self: stretch;
display: inline-flex;
align-items: center;
justify-content: center;
}
.hero-copy-standard .hero-reassurance .mini-badge {
padding: 8px 6px;
}
.hero-copy-standard .mini-badge__line--full {
display: none;
}
.hero-copy-standard .mini-badge__line--short:not(.mini-badge__google-reviews) {
display: inline;
white-space: nowrap;
}
.hero-copy-standard .mini-badge__google-reviews {
display: inline-flex;
}
.hero-copy-standard .hero-reassurance-top .mini-badge--highlight .mini-badge__google-reviews {
font-size: 12px;
gap: 5px;
}
.hero-copy-standard .hero-reassurance-top .mini-badge--highlight .mini-badge__google-g {
width: 15px;
height: 15px;
}
.hero-copy-standard .hero-reassurance-top .mini-badge--highlight .mini-badge__google-stars {
font-size: 11px;
}
}
.triple-cta-group .btn-callback .btn-text-desktop {
display: none;
}
.triple-cta-group .btn-callback .btn-text-mobile {
display: inline;
}
@media (min-width: 641px) {
.triple-cta-group .btn-callback .btn-text-desktop {
display: inline;
}
.triple-cta-group .btn-callback .btn-text-mobile {
display: none;
}
}
.hero-copy-standard .triple-cta-group--calendar-mid {
margin: 0 0 24px;
}
.triple-cta-group--calendar-mid .btn-primary {
order: 1;
}
.triple-cta-group--calendar-mid .btn-callback {
order: 2;
}
.triple-cta-group--calendar-mid .btn-calendar {
order: 3;
}
.triple-cta-group--calendar-mid .btn-primary {
background: linear-gradient(135deg, var(--cta-sky) 0%, var(--cta-sky-deep) 100%) !important;
box-shadow: 0 6px 20px var(--cta-sky-shadow) !important;
animation: none !important;
}
.triple-cta-group--calendar-mid .btn-primary:hover {
filter: brightness(1.06);
box-shadow: 0 10px 28px var(--cta-sky-shadow-strong) !important;
}
.triple-cta-group--calendar-mid .btn-callback {
animation: none !important;
}
.triple-cta-group--calendar-mid .btn-calendar {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
border: none !important;
color: var(--surface) !important;
box-shadow: 0 8px 28px var(--cta-navy-shadow) !important;
animation: cta-pulse-booking 3s ease-in-out infinite !important;
font-weight: var(--weight-bold);
}
.triple-cta-group--calendar-mid .btn-calendar:hover {
background: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-dark) 100%) !important;
border: none !important;
color: var(--surface) !important;
filter: brightness(1.08);
transform: translateY(-2px);
box-shadow: 0 12px 32px var(--cta-navy-shadow-strong) !important;
}
@media (min-width: 901px) {
.hero-copy-standard .triple-cta-group--calendar-mid {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
gap: 10px;
}
.hero-copy-standard .triple-cta-group--calendar-mid .btn-primary {
order: 1;
}
.hero-copy-standard .triple-cta-group--calendar-mid .btn-callback {
order: 2;
}
.hero-copy-standard .triple-cta-group--calendar-mid .btn-calendar {
order: 3;
}
.hero-copy-standard .triple-cta-group--calendar-mid .btn-primary,
.hero-copy-standard .triple-cta-group--calendar-mid .btn-callback,
.hero-copy-standard .triple-cta-group--calendar-mid .btn-calendar {
width: auto;
flex: 0 1 auto;
min-width: 0;
padding: 12px 16px;
font-size: 14px;
white-space: nowrap;
line-height: 1.25;
}
}
@media (max-width: 900px) {
.hero-copy-standard .triple-cta-group.justify-content-start {
justify-content: center;
}
}
@media (max-width: 640px) {
.hero-copy-standard .triple-cta-group--calendar-mid {
margin: 4px 0 0;
}
.triple-cta-group--calendar-mid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 8px;
flex-direction: unset;
align-items: stretch;
}
.triple-cta-group--calendar-mid .btn-primary,
.triple-cta-group--calendar-mid .btn-calendar,
.triple-cta-group--calendar-mid .btn-callback {
width: 100%;
justify-content: center;
}
.triple-cta-group--calendar-mid .btn-primary {
grid-column: 1;
grid-row: 1;
order: unset;
min-width: 0;
padding: 10px 8px;
font-size: 12px;
white-space: nowrap;
line-height: 1.2;
}
.triple-cta-group--calendar-mid .btn-callback {
grid-column: 2;
grid-row: 1;
order: unset;
min-width: 0;
padding: 10px 8px;
font-size: 12px;
white-space: nowrap;
line-height: 1.2;
}
.triple-cta-group--calendar-mid .btn-calendar {
grid-column: 1 / -1;
grid-row: 2;
order: unset;
}
}
.page-hero-ref {
position: relative;
overflow: hidden;
}
.page-hero-ref-grid {
display: block;
}
.page-hero-ref-title-desktop {
display: none;
}
.page-hero-ref-visual-desktop {
display: none;
}
.page-hero-ref-visual-mobile {
margin: 0 0 clamp(20px, 3vw, 28px);
}
.page-hero-ref-visual--title-overlay {
overflow: hidden;
border-radius: var(--radius-lg);
}
.page-hero-ref-visual--title-overlay.hero-image-frame::before {
display: none;
}
.page-hero-ref-visual--title-overlay > img {
border-radius: 0;
}
.page-hero-ref-title-scrim {
position: absolute;
inset: 0;
z-index: 2;
border-radius: inherit;
background:
linear-gradient(
180deg,
transparent 0%,
color-mix(in srgb, var(--primary-dark) 28%, transparent) 50%,
color-mix(in srgb, var(--primary-dark) 88%, var(--primary-blue)) 100%
);
pointer-events: none;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-visual--title-overlay .page-hero-ref-title-on-image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 3;
margin: 0;
padding: clamp(14px, 3.5vw, 24px) clamp(12px, 3.2vw, 20px);
max-width: none;
font-size: clamp(22px, 6.2vw, 26px);
font-weight: var(--weight-black);
line-height: 1.14;
letter-spacing: -0.035em;
text-wrap: balance;
overflow-wrap: break-word;
color: color-mix(in srgb, var(--surface) 90%, var(--primary-light));
text-shadow: 0 2px 18px color-mix(in srgb, var(--primary-dark) 72%, transparent);
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-visual--title-overlay .page-hero-ref-title-on-image span {
display: block;
margin-top: 0.28em;
padding-top: 0.38em;
font-size: 0.94em;
background: linear-gradient(
118deg,
var(--primary-light) 0%,
color-mix(in srgb, var(--surface) 96%, var(--primary-light)) 42%,
color-mix(in srgb, var(--primary-blue) 28%, var(--primary-light)) 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
filter: drop-shadow(0 2px 10px color-mix(in srgb, var(--primary-blue) 38%, transparent));
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-visual--title-overlay .page-hero-ref-title-on-image span::before {
content: "";
display: block;
width: min(56px, 18vw);
height: 3px;
margin: 0 0 0.55em;
border-radius: var(--radius-pill);
background: linear-gradient(
90deg,
color-mix(in srgb, var(--primary-light) 30%, transparent),
var(--primary-light),
color-mix(in srgb, var(--primary-blue) 35%, var(--primary-light))
);
opacity: 0.92;
}
@media (max-width: 900px) {
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-visual--title-overlay .page-hero-ref-title-on-image span::before {
margin-inline: auto;
}
}
@media (max-width: 640px) {
.page-hero-ref-visual-mobile {
margin-bottom: 12px;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle.hero-subtitle-standard {
margin-bottom: 12px;
}
.page-hero-ref-visual--title-overlay {
border-radius: var(--radius-md);
}
.page-hero-ref-title-scrim {
background:
linear-gradient(
180deg,
color-mix(in srgb, var(--primary-dark) 10%, transparent) 0%,
color-mix(in srgb, var(--primary-dark) 42%, transparent) 46%,
color-mix(in srgb, var(--primary-dark) 92%, var(--primary-blue)) 100%
);
}
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle.hero-subtitle-standard {
container-type: inline-size;
max-width: 100%;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle--two-lines .page-hero-ref-subtitle__line {
display: block;
max-width: 100%;
white-space: nowrap;
overflow: hidden;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle__line--primary {
font-size: clamp(15px, 4.5vw, 17px);
line-height: 1.32;
letter-spacing: -0.01em;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle__line--fit {
font-size: clamp(14px, 4.2vw, 17px);
line-height: 1.28;
letter-spacing: -0.01em;
}
.page-hero-ref-copy .hero-micro-testimonial {
margin-top: 16px;
max-width: 520px;
}
@media (max-width: 900px) {
.page-hero-ref-copy {
text-align: center;
}
.page-hero-ref .page-hero-ref-visual-desktop {
display: none !important;
}
.page-hero-ref-copy .hero-sap-seal {
max-width: none;
padding: 6px 10px;
gap: 8px;
margin: 4px 0 12px;
}
.page-hero-ref-copy .hero-sap-seal-logo-wrap {
flex-basis: 48px;
width: 48px;
min-height: 40px;
}
.page-hero-ref-copy .hero-sap-seal-logo {
max-width: 48px;
height: 40px;
}
.page-hero-ref-copy .hero-sap-seal-title {
font-size: 13px;
}
.page-hero-ref-copy .hero-sap-seal-subtitle {
font-size: 12px;
line-height: 1.3;
white-space: normal;
text-wrap: balance;
}
.page-hero-ref-copy .hero-micro-testimonial {
margin-left: auto;
margin-right: auto;
text-align: left;
}
}
@media (min-width: 901px) and (max-width: 1024px) {
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-title-desktop {
font-size: clamp(32px, 3.6vw, 36px);
}
}
@media (min-width: 901px) {
.page-hero-ref.hero-section-ref {
padding-top: var(--page-hero-ref-desktop-padding-top);
padding-bottom: var(--page-hero-ref-desktop-padding-bottom);
}
.page-hero-ref-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(380px, 480px);
gap: clamp(40px, 5vw, 64px);
align-items: center;
}
.page-hero-ref-visual-mobile {
display: none !important;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-title-desktop {
display: block;
font-size: clamp(38px, 5.6vw, 64px);
font-weight: var(--weight-black);
color: var(--primary-dark);
letter-spacing: -0.055em;
line-height: 0.98;
max-width: 780px;
margin: 0 0 18px;
text-wrap: balance;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-title-desktop span {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: var(--weight-extra);
display: inline;
}
.page-hero-ref-visual-desktop {
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
min-width: 0;
}
.page-hero-ref-visual-frame {
width: 100%;
max-width: 480px;
margin: 0;
}
.page-hero-ref-visual-frame > img {
width: 100%;
height: auto;
display: block;
}
.page-hero-ref-copy.hero-copy-standard {
max-width: none;
text-align: left;
}
.page-hero-ref-copy.hero-copy-standard .hero-sap-seal {
margin-left: 0;
margin-right: 0;
}
.page-hero-ref-copy.hero-copy-standard .hero-reassurance {
margin-left: 0;
margin-right: 0;
max-width: 520px;
}
.page-hero-ref-copy .triple-cta-group.justify-content-start,
.page-hero-ref-copy .triple-cta-group--calendar-mid {
justify-content: flex-start;
}
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle__line--primary,
.page-hero-ref-copy.hero-copy-standard .page-hero-ref-subtitle__line--fit {
font-size: clamp(17px, 2vw, 21px);
line-height: 1.45;
letter-spacing: normal;
}
.page-hero-ref-copy .hero-micro-testimonial {
margin-left: 0;
margin-right: 0;
}
}
.page-hero-ref-founder-visual {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: 320px;
margin-inline: auto;
}
.page-hero-ref-founder-photo-wrap {
position: relative;
width: fit-content;
margin: 0 auto;
}
.page-hero-ref-founder-photo {
display: block;
width: 200px;
height: 200px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--primary-blue);
box-shadow: 0 12px 40px color-mix(in srgb, var(--primary-blue) 22%, transparent);
}
.page-hero-ref-founder-badge {
position: absolute;
border-radius: var(--radius-lg);
box-shadow: var(--shadow-card);
line-height: 1.2;
}
.page-hero-ref-founder-badge--exp {
top: 8px;
right: -12px;
background: var(--surface);
color: var(--text-dark);
padding: 8px 12px;
font-size: 13px;
font-weight: var(--weight-medium);
}
.page-hero-ref-founder-badge--exp span {
font-weight: var(--weight-extra);
color: var(--primary-blue);
}
.page-hero-ref-founder-badge--price {
bottom: 12px;
right: -16px;
background: var(--primary-blue);
color: var(--surface);
padding: 10px 14px;
text-align: center;
box-shadow: 0 6px 20px color-mix(in srgb, var(--primary-blue) 32%, transparent);
}
.page-hero-ref-founder-badge__value {
display: block;
font-size: 18px;
font-weight: var(--weight-extra);
}
.page-hero-ref-founder-badge__label {
display: block;
font-size: 10px;
font-weight: var(--weight-medium);
opacity: 0.92;
}
.page-hero-ref-founder-tagline {
width: 100%;
margin: 16px 0 0;
padding: 0;
font-size: 14px;
line-height: 1.45;
font-weight: var(--weight-medium);
color: var(--text-muted);
text-align: center;
text-wrap: balance;
}
.page-hero-ref--founder .page-hero-ref-founder-mobile {
margin-bottom: 16px;
}
.page-hero-ref--founder .page-hero-ref-title-desktop--founder {
margin: 0 0 14px;
font-size: clamp(24px, 6.4vw, 30px);
font-weight: var(--weight-black);
color: var(--primary-dark);
letter-spacing: -0.04em;
line-height: 1.08;
text-wrap: balance;
}
.page-hero-ref--founder .page-hero-ref-title-desktop--founder span {
background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: var(--weight-extra);
}
.page-hero-ref--founder .page-hero-ref-title-desktop--founder {
display: block;
}
@media (max-width: 900px) {
.page-hero-ref--founder .page-hero-ref-founder-desktop {
display: none !important;
}
}
@media (min-width: 901px) {
.page-hero-ref--founder .page-hero-ref-grid {
align-items: start;
gap: clamp(36px, 4vw, 52px);
}
.page-hero-ref--founder .page-hero-ref-founder-mobile {
display: none;
}
.page-hero-ref--founder .page-hero-ref-founder-desktop {
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding-top: 4px;
}
.page-hero-ref--founder .page-hero-ref-founder-visual {
max-width: 300px;
margin-inline: 0;
}
.page-hero-ref--founder .page-hero-ref-founder-photo {
width: 280px;
height: 280px;
}
.page-hero-ref--founder .page-hero-ref-title-desktop--founder {
font-size: clamp(34px, 4.2vw, 52px);
font-weight: var(--weight-black);
color: var(--primary-dark);
letter-spacing: -0.048em;
line-height: 1.04;
max-width: 640px;
margin: 0 0 16px;
}
.page-hero-ref--founder .page-hero-ref-founder-tagline {
font-size: 15px;
text-align: center;
}
.page-hero-ref--founder .page-hero-ref-founder-badge--exp {
top: 10px;
right: -20px;
}
.page-hero-ref--founder .page-hero-ref-founder-badge--price {
bottom: 20px;
right: -20px;
}
.page-hero-ref--founder .page-hero-ref-founder-badge__value {
font-size: 22px;
}
.page-hero-ref--founder .page-hero-ref-founder-badge__label {
font-size: 11px;
}
}
.landing-reviews {
padding: 80px 0;
}
.landing-reviews .section-title {
text-align: center;
margin-bottom: 16px;
}
.landing-testimonials-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-bottom: 40px;
}
.landing-testimonial-card {
background: var(--surface);
border: 1px solid var(--border-soft);
border-radius: var(--radius-lg);
padding: 28px 28px 22px;
box-shadow: var(--shadow-soft);
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
}
.landing-testimonial-card::before {
content: '\201C';
position: absolute;
top: -10px;
right: 18px;
font-size: 96px;
color: var(--primary-blue);
opacity: 0.08;
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
}
.landing-testimonial-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(12, 113, 195, 0.12);
border-color: var(--primary-light);
}
.testimonial-stars {
color: #fbbf24;
font-size: 18px;
letter-spacing: 3px;
margin-bottom: 12px;
line-height: 1;
}
.testimonial-problem {
font-size: 11px;
font-weight: var(--weight-bold);
color: var(--primary-blue);
background: rgba(12, 113, 195, 0.08);
text-transform: uppercase;
letter-spacing: 0.8px;
margin: 0 0 14px;
padding: 5px 12px;
border-radius: var(--radius-pill);
display: inline-block;
}
.testimonial-text {
font-size: 14px;
color: var(--text-dark);
line-height: 1.65;
margin: 0 0 18px;
}
.testimonial-author {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px;
margin-top: auto;
border-top: 1px solid var(--border-soft);
padding-top: 14px;
}
.testimonial-author strong {
font-size: 14px;
color: var(--text-dark);
font-weight: var(--weight-bold);
}
.testimonial-location {
font-size: 13px;
color: var(--text-muted);
}
.si-reviews-widget {
margin-top: 60px;
}
.si-reviews-widget-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 30px;
flex-wrap: wrap;
gap: 20px;
}
.si-reviews-widget-header-left {
display: flex;
flex-direction: column;
gap: 12px;
}
.si-reviews-widget-title {
font-size: 28px;
font-weight: var(--weight-extra);
color: var(--primary-dark);
margin: 0;
line-height: 1.2;
}
.si-reviews-widget-google {
display: flex;
align-items: center;
gap: 12px;
}
.si-reviews-widget-score-info {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.si-reviews-widget-score {
font-size: 16px;
font-weight: var(--weight-bold);
color: var(--text-dark);
}
.si-reviews-widget-stars {
color: #fbbf24;
font-size: 16px;
letter-spacing: 2px;
}
.si-reviews-widget-count {
font-size: 14px;
color: var(--text-muted);
}
.si-reviews-widget-header-right {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}
.si-reviews-widget-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: var(--weight-bold);
color: var(--primary-dark);
background: var(--surface);
padding: 8px 16px;
border-radius: var(--radius-pill);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.si-reviews-widget-badge svg {
color: var(--primary-blue);
}
.si-reviews-widget-controls {
display: flex;
gap: 12px;
}
.si-reviews-widget-nav {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--surface);
border: 1px solid var(--border-soft);
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: center;
color: var(--text-dark);
cursor: pointer;
transition: all 0.2s ease;
}
.si-reviews-widget-nav:hover {
background: var(--primary-blue);
color: #fff;
border-color: var(--primary-blue);
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(12, 113, 195, 0.2);
}
.si-reviews-widget-carousel-wrap {
position: relative;
margin: 0 -20px;
padding: 20px 20px 40px;
-webkit-mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 250px), transparent 100%);
mask-image: linear-gradient(to right, transparent 0px, black 40px, black calc(100% - 250px), transparent 100%);
}
.si-reviews-widget-track {
display: flex;
gap: 24px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
padding: 20px 0 40px 0;
margin: -20px 0 -40px 0;
}
.si-reviews-widget-track::-webkit-scrollbar {
display: none;
}
.si-reviews-widget-card {
flex: 0 0 340px;
scroll-snap-align: start;
background: var(--surface);
border-radius: 16px;
padding: 28px;
display: flex;
flex-direction: column;
position: relative;
border: 1px solid rgba(226, 232, 240, 0.8);
box-shadow: 0 10px 30px -5px rgba(0,0,0,0.06);
transition: transform 0.3s ease, box-shadow 0.3s ease;
overflow: hidden;
}
.si-reviews-widget-card::before {
content: '\201C';
position: absolute;
top: -10px;
right: 20px;
font-size: 120px;
color: var(--primary-blue);
opacity: 0.04;
font-family: Georgia, serif;
line-height: 1;
pointer-events: none;
z-index: 0;
}
.si-reviews-widget-card:hover {
transform: translateY(-6px);
box-shadow: 0 20px 40px -10px rgba(12, 113, 195, 0.12);
}
.si-reviews-widget-card-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 16px;
position: relative;
z-index: 1;
}
.si-reviews-widget-avatar,
.si-reviews-widget-avatar-placeholder {
width: 46px;
height: 46px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.si-reviews-widget-avatar-placeholder {
background: var(--primary-light);
color: var(--primary-blue);
display: flex;
align-items: center;
justify-content: center;
font-weight: var(--weight-bold);
font-size: 18px;
}
.si-reviews-widget-author {
display: flex;
flex-direction: column;
flex-grow: 1;
min-width: 0;
}
.si-reviews-widget-name {
font-size: 15px;
font-weight: var(--weight-bold);
color: var(--text-dark);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
transition: color 0.2s ease;
}
.si-reviews-widget-name:hover {
color: var(--primary-blue);
}
.si-reviews-widget-date {
font-size: 13px;
color: var(--text-muted);
}
.si-reviews-widget-gicon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--surface);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: transform 0.2s ease;
}
.si-reviews-widget-gicon:hover {
transform: scale(1.1);
}
.si-reviews-widget-card-stars {
color: #fbbf24;
font-size: 16px;
letter-spacing: 2px;
margin-bottom: 14px;
position: relative;
z-index: 1;
}
.si-reviews-widget-text {
font-size: 14px;
color: var(--text-dark);
line-height: 1.65;
margin: 0;
flex-grow: 1;
position: relative;
z-index: 1;
}
.si-reviews-widget-more {
color: var(--primary-blue);
font-weight: var(--weight-bold);
text-decoration: none;
font-size: 13px;
margin-left: 4px;
}
.si-reviews-widget-more:hover {
text-decoration: underline;
}
@media (max-width: 900px) {
.landing-testimonials-grid {
grid-template-columns: 1fr;
gap: 16px;
}
}
@media (max-width: 768px) {
.si-reviews-widget-header {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.si-reviews-widget-header-right {
flex-direction: row;
width: 100%;
justify-content: space-between;
align-items: center;
}
.si-reviews-widget-card {
flex: 0 0 280px;
padding: 20px;
}
}