:root {
--font-body:"Nunito Sans", "Segoe UI", Arial, system-ui, sans-serif;
--font-display:"Rubik", "Nunito Sans", "Segoe UI", Arial, system-ui, sans-serif;
--fs-xs:12px;
--fs-sm:13px;
--fs-base:16px;
--fs-ui:15px;
--fs-body-lg:17px;
--fs-card-title:18px;
--fs-hero:clamp(38px, 6vw, 66px);
--fs-section:clamp(30px, 3.7vw, 42px);
--fs-subsection:clamp(22px, 2.7vw, 30px);
--fs-price:clamp(30px, 4.2vw, 40px);
--milk:#eef8ff;
--paper:#ecebff;
--warm:#f3e8ff;
--linen:#d9e8ff;
--ink:#17211f;
--text:#263330;
--muted:#66736e;
--line:rgba(39, 51, 47, .13);
--aqua:#18c7d8;
--aqua-deep:#087d9b;
--violet:#6757d8;
--violet-soft:#b8aaff;
--ice:#e9fbff;
--pearl:#f0e8ff;
--rose:#f4b6cf;
--green:var(--aqua-deep);
--green-dark:#354bba;
--mint:var(--ice);
--gold:#c7a45a;
--coral:#de7c93;
--shadow:0 24px 70px rgba(71, 69, 132, .14);
--soft-shadow:0 14px 36px rgba(71, 69, 132, .11);
--radius:22px;
--wrap:min(1160px, calc(100% - 32px));
}
* { box-sizing:border-box; }
:is(.landing-beta-page, .business-website-page),
:is(.landing-beta-page, .business-website-page) * {
box-sizing:border-box;
}
:is(.landing-beta-page, .business-website-page) {
width:100%;
min-width:0;
overflow-x:clip;
font-family:var(--font-body) !important;
color:var(--text);
background:#d9efff;
line-height:1.62;
position:relative;
z-index:1;
}
:is(.landing-beta-page, .business-website-page) :where(a, button, summary) {
font-family:inherit;
-webkit-tap-highlight-color:transparent;
}
:is(.landing-beta-page, .business-website-page) :where(a, a:hover, a:focus, a:active, a:visited) {
text-decoration:none !important;
}
:is(.landing-beta-page, .business-website-page) :where(button) {
appearance:none;
-webkit-appearance:none;
}
html {
scroll-behavior:smooth;
background:#d9efff;
width:100%;
min-width:0;
overflow-x:clip;
}
body {
position:relative;
margin:0;
padding:0;
width:100%;
min-width:0;
overflow-x:clip;
font-family:var(--font-body);
font-size:var(--fs-base);
color:var(--text);
background:#d9efff;
line-height:1.62;
text-rendering:optimizeLegibility;
}
body.elementor-page,
body.page-template-elementor_canvas {
background:#d9efff !important;
margin:0 !important;
padding:0 !important;
overflow-x:clip !important;
}
body.elementor-page #page,
body.elementor-page .site,
body.elementor-page .entry-content,
body.elementor-page .elementor,
body.elementor-page .e-con,
body.elementor-page .e-con-full,
body.elementor-page .e-con-inner,
body.elementor-page .elementor-section,
body.elementor-page .elementor-container,
body.elementor-page .elementor-widget,
body.elementor-page .elementor-widget-wrap,
body.elementor-page .elementor-widget-html,
body.elementor-page .elementor-widget-container,
body.page-template-elementor_canvas #page,
body.page-template-elementor_canvas .site,
body.page-template-elementor_canvas .entry-content,
body.page-template-elementor_canvas .elementor,
body.page-template-elementor_canvas .e-con,
body.page-template-elementor_canvas .e-con-full,
body.page-template-elementor_canvas .e-con-inner,
body.page-template-elementor_canvas .elementor-section,
body.page-template-elementor_canvas .elementor-container,
body.page-template-elementor_canvas .elementor-widget,
body.page-template-elementor_canvas .elementor-widget-wrap,
body.page-template-elementor_canvas .elementor-widget-html,
body.page-template-elementor_canvas .elementor-widget-container {
max-width:none !important;
width:100% !important;
margin-left:0 !important;
margin-right:0 !important;
padding-left:0 !important;
padding-right:0 !important;
overflow:visible !important;
}
body.elementor-page .elementor-widget-html > .elementor-widget-container,
body.page-template-elementor_canvas .elementor-widget-html > .elementor-widget-container {
width:100vw !important;
margin-left:calc(50% - 50vw) !important;
margin-right:calc(50% - 50vw) !important;
background:#d9efff !important;
}
body::before,
body::after {
content:"";
position:fixed;
pointer-events:none;
}
body::before {
left:-18vw;
top:16vh;
width:48vw;
height:48vw;
z-index:0;
border-radius:42% 58% 64% 36%;
background:rgba(122, 218, 249, .16);
opacity:.82;
transform:translate3d(0,0,0);
animation:ambientFloat 26s ease-in-out infinite alternate;
}
body::after {
right:-15vw;
top:34vh;
width:44vw;
height:44vw;
z-index:0;
border-radius:60% 40% 38% 62%;
background:rgba(163, 154, 239, .14);
opacity:.72;
animation:ambientFloat 30s ease-in-out infinite alternate-reverse;
}
body > * {
position:relative;
z-index:1;
}
@keyframes ambientFloat {
from { transform:translate3d(-1.1vw, -1vh, 0) scale(1); }
to { transform:translate3d(1.2vw, 1.2vh, 0) scale(1.04); }
}
img, svg { display:block; }
img { max-width:100%; height:auto; }
a { color:inherit; }
.sr-only {
position:absolute;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.wrap {
width:var(--wrap);
margin:0 auto;
}
.icon {
width:1.12em;
height:1.12em;
min-width:1.12em;
flex:0 0 auto;
stroke:currentColor;
stroke-width:2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
}
:is(.landing-beta-page, .business-website-page) .icon,
:is(.landing-beta-page, .business-website-page) .icon * {
stroke:currentColor !important;
fill:none !important;
}
.desktop-header {
position:fixed;
top:18px;
left:0;
right:0;
z-index:1000;
display:none;
pointer-events:none;
--desktop-header-width:min(1180px, calc(100vw - 44px));
}
.desktop-header__inner {
position:relative;
width:var(--desktop-header-width);
min-height:78px;
margin:0 auto;
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:50px;
padding:10px 14px;
direction:ltr;
pointer-events:auto;
border:1px solid rgba(123, 210, 255, .22);
border-radius:26px;
background:
radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .98) 0 22%, rgba(5, 10, 34, .94) 42%, rgba(17, 29, 82, .86) 72%, rgba(29, 42, 112, .78) 100%);
box-shadow:
0 22px 70px rgba(0, 0, 0, .26),
inset 0 1px 0 rgba(255, 255, 255, .08),
0 0 0 1px rgba(104, 225, 255, .08);
backdrop-filter:blur(18px);
}
.desktop-header__inner::before {
content:"";
position:absolute;
inset:0;
border-radius:inherit;
pointer-events:none;
background:
linear-gradient(90deg, rgba(104, 225, 255, .18), transparent 24%, transparent 76%, rgba(158, 125, 255, .18)),
radial-gradient(circle at 50% 0, rgba(104, 225, 255, .16), transparent 42%);
opacity:.72;
}
.desktop-header__nav,
.desktop-header__actions,
.desktop-brand {
position:relative;
z-index:1;
}
.desktop-header__nav {
display:flex;
align-items:center;
justify-content:flex-start;
gap:6px;
direction:rtl;
}
.desktop-header__nav a,
.desktop-services summary,
.desktop-header__price,
.desktop-header__cta,
.desktop-social {
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
border-radius:999px;
text-decoration:none;
white-space:nowrap;
font-size:15px;
font-weight:800;
line-height:1;
transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.desktop-header__nav a {
padding:0 14px;
color:#dff7ff;
background:rgba(255, 255, 255, .045);
border:1px solid rgba(255, 255, 255, .08);
}
.desktop-header__nav a:hover,
.desktop-header__nav a:focus-visible,
.desktop-header__nav a.is-active {
color:#ffffff;
background:rgba(104, 225, 255, .13);
border-color:rgba(104, 225, 255, .34);
outline:none;
box-shadow:0 0 24px rgba(104, 225, 255, .14);
transform:translateY(-1px);
}
.desktop-header__nav a.is-active {
background:rgba(104, 225, 255, .16);
border-color:rgba(104, 225, 255, .54);
box-shadow:
0 0 28px rgba(104, 225, 255, .2),
inset 0 1px 0 rgba(255,255,255,.12);
}
.desktop-brand {
width:62px;
height:62px;
display:grid;
place-items:center;
border-radius:19px;
color:#ffffff;
text-decoration:none;
}
.desktop-brand::before {
content:"";
position:absolute;
inset:-7px;
border-radius:24px;
border:1px solid rgba(104, 225, 255, .52);
box-shadow:
0 0 12px rgba(104, 225, 255, .52),
0 0 30px rgba(104, 225, 255, .32),
0 0 48px rgba(154, 114, 255, .24);
animation:brandGlowPulse 2.8s ease-in-out infinite;
}
.desktop-brand img {
position:relative;
z-index:1;
width:62px;
height:62px;
border-radius:18px;
object-fit:cover;
border:1px solid rgba(184, 170, 255, .36);
box-shadow:0 12px 34px rgba(0, 0, 0, .34);
}
.desktop-header__actions {
width:100%;
display:flex;
align-items:center;
justify-content:flex-start;
gap:10px;
direction:ltr;
}
.desktop-services {
position:static;
order:10;
margin-left:auto;
}
.desktop-services summary {
padding:0 17px;
cursor:pointer;
list-style:none;
color:#effcff;
background:linear-gradient(135deg, rgba(41, 66, 156, .86), rgba(12, 25, 72, .92));
border:1px solid rgba(104, 225, 255, .38);
box-shadow:0 0 26px rgba(104, 225, 255, .14), inset 0 1px 0 rgba(255,255,255,.14);
}
.desktop-services summary::-webkit-details-marker {
display:none;
}
.desktop-services summary::after {
content:"";
width:7px;
height:7px;
border-left:2px solid currentColor;
border-bottom:2px solid currentColor;
transform:rotate(-45deg) translateY(-1px);
opacity:.78;
transition:transform .18s ease;
}
.desktop-services summary::before {
content:"";
width:18px;
height:14px;
flex:0 0 18px;
background:
linear-gradient(currentColor, currentColor) 0 0 / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 50% / 100% 2px no-repeat,
linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
opacity:.9;
filter:drop-shadow(0 0 8px rgba(104, 225, 255, .32));
}
.desktop-services[open] summary::after {
transform:rotate(135deg) translateY(-2px);
}
.desktop-services summary:hover,
.desktop-services summary:focus-visible {
color:#ffffff;
border-color:rgba(104, 225, 255, .62);
background:linear-gradient(135deg, rgba(56, 86, 190, .94), rgba(10, 35, 96, .96));
box-shadow:0 0 34px rgba(104, 225, 255, .22), inset 0 1px 0 rgba(255,255,255,.18);
outline:none;
}
.desktop-services__panel {
position:fixed;
top:108px;
right:auto;
left:50%;
width:var(--desktop-header-width);
max-height:min(70vh, 620px);
display:grid;
grid-template-columns:repeat(5, minmax(0, 1fr));
gap:12px;
padding:16px;
overflow:auto;
border:1px solid rgba(184, 170, 255, .24);
border-radius:24px;
background:rgba(7, 12, 36, .96);
box-shadow:0 28px 80px rgba(0,0,0,.42), 0 0 40px rgba(104, 225, 255, .08);
backdrop-filter:blur(18px);
direction:rtl;
transform:translateX(-50%);
z-index:1001;
}
.desktop-services__group {
display:flex;
flex-direction:column;
gap:7px;
min-width:0;
padding:10px;
border:1px solid rgba(184, 170, 255, .14);
border-radius:18px;
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
}
.desktop-services__group h3 {
margin:0 0 4px;
color:#bff7ff;
font-family:var(--font-display);
font-size:15px;
font-weight:850;
line-height:1.22;
letter-spacing:0;
}
.desktop-services__panel a {
min-height:42px;
display:flex;
align-items:center;
padding:10px 11px;
border:1px solid rgba(184, 170, 255, .14);
border-radius:14px;
color:#e9f9ff;
background:rgba(80, 108, 220, .12);
text-decoration:none;
font-size:14px;
font-weight:750;
line-height:1.35;
}
.desktop-services__panel a:hover,
.desktop-services__panel a:focus-visible {
color:#ffffff;
border-color:rgba(104, 225, 255, .38);
background:rgba(104, 225, 255, .14);
outline:none;
}
.desktop-services__panel a.is-current {
color:#ffffff;
border-color:rgba(104, 225, 255, .52);
background:linear-gradient(135deg, rgba(75, 92, 220, .38), rgba(24, 199, 216, .2));
box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 0 24px rgba(104, 225, 255, .13);
}
.desktop-header__price {
order:9;
min-height:46px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding:0 17px;
border:1px solid rgba(255, 220, 132, .72);
border-radius:999px;
color:#fff4c8 !important;
background:linear-gradient(135deg, rgba(41,66,156,.86), rgba(12,25,72,.92));
box-shadow:0 0 26px rgba(214, 169, 65, .14), inset 0 1px 0 rgba(255,255,255,.14);
text-decoration:none !important;
white-space:nowrap;
font-size:15px;
font-weight:900;
line-height:1;
transition:transform .18s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.desktop-header__price:hover,
.desktop-header__price:focus-visible {
color:#fff8dc !important;
border-color:rgba(255, 237, 183, .94);
background:linear-gradient(135deg, rgba(56,86,190,.94), rgba(10,35,96,.96));
box-shadow:0 0 34px rgba(214, 169, 65, .24), inset 0 1px 0 rgba(255,255,255,.18);
transform:translateY(-1px);
outline:none;
}
.service-menu__panel a.service-menu__price {
min-height:42px;
margin-bottom:4px;
border:1px solid rgba(255, 220, 132, .82);
border-radius:12px;
color:#fff4c8;
background:rgba(86, 119, 214, .16);
box-shadow:inset 0 0 0 1px rgba(255, 220, 132, .18), 0 10px 24px rgba(214, 169, 65, .12);
}
.service-menu__panel a.service-menu__price:hover,
.service-menu__panel a.service-menu__price:focus-visible {
color:#fff8dc;
border-color:rgba(255, 237, 183, .96);
background:rgba(255, 220, 132, .1);
box-shadow:inset 0 0 0 1px rgba(255, 237, 183, .24), 0 12px 30px rgba(214, 169, 65, .2);
}
:is(.landing-beta-page, .landing-conversion-page) .service-menu__panel a.service-menu__price,
:is(.landing-beta-page, .landing-conversion-page) .service-menu__panel a.service-menu__price:hover,
:is(.landing-beta-page, .landing-conversion-page) .service-menu__panel a.service-menu__price:focus,
:is(.landing-beta-page, .landing-conversion-page) .service-menu__panel a.service-menu__price:focus-visible,
:is(.landing-beta-page, .landing-conversion-page) .service-menu__panel a.service-menu__price:active,
:is(.landing-beta-page, .landing-conversion-page) .service-menu__panel a.service-menu__price:visited {
color:#fff4c8 !important;
}
.desktop-header__cta {
padding:0 16px;
color:#ffffff !important;
background:linear-gradient(135deg, #4c5fd8, #168ed9);
border:1px solid rgba(104, 225, 255, .34);
box-shadow:0 0 26px rgba(76, 95, 216, .28), inset 0 1px 0 rgba(255,255,255,.2);
}
.desktop-header__cta:hover,
.desktop-header__cta:focus-visible {
color:#ffffff !important;
transform:translateY(-1px);
box-shadow:0 0 34px rgba(104, 225, 255, .28), 0 12px 28px rgba(0,0,0,.2);
outline:none;
}
.desktop-social {
width:42px;
min-width:42px;
height:42px;
min-height:42px;
padding:0;
border:1px solid rgba(255,255,255,.16);
color:#ffffff !important;
box-shadow:0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.desktop-social--whatsapp {
order:2;
background:#16b96f;
border-color:rgba(142, 255, 211, .42);
}
.desktop-social--facebook {
order:1;
background:#1877f2;
border-color:rgba(151, 202, 255, .42);
}
.desktop-social--phone {
order:3;
background:#4052d8;
border-color:rgba(184, 170, 255, .46);
}
.desktop-social:hover,
.desktop-social:focus-visible {
color:#ffffff !important;
transform:translateY(-1px);
outline:none;
}
.desktop-social--whatsapp:hover,
.desktop-social--whatsapp:focus-visible {
background:#18c979;
box-shadow:0 0 28px rgba(22, 185, 111, .3), 0 12px 26px rgba(0,0,0,.22);
}
.desktop-social--facebook:hover,
.desktop-social--facebook:focus-visible {
background:#2384ff;
box-shadow:0 0 28px rgba(24, 119, 242, .3), 0 12px 26px rgba(0,0,0,.22);
}
.desktop-social--phone:hover,
.desktop-social--phone:focus-visible {
background:#4f64f0;
box-shadow:0 0 28px rgba(79, 100, 240, .32), 0 12px 26px rgba(0,0,0,.22);
}
.desktop-social__svg {
width:20px;
height:20px;
display:block;
fill:currentColor;
stroke:none;
}
.desktop-social--language{order:4;background:#293caa;border-color:rgba(184,170,255,.46);}
.desktop-social__svg--globe{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.language-switch{position:relative;display:inline-grid;place-items:center;}
.language-switch summary{list-style:none;cursor:pointer;}
.language-switch summary::-webkit-details-marker{display:none;}
.language-switch__panel{position:absolute;top:calc(100% + 10px);left:50%;width:58px;display:grid;gap:6px;padding:8px;border:1px solid rgba(184,170,255,.22);border-radius:16px;background:rgba(7,12,36,.96);box-shadow:0 18px 48px rgba(0,0,0,.34),0 0 24px rgba(104,225,255,.12);backdrop-filter:blur(16px);transform:translateX(-50%);z-index:2147482502;}
.language-switch__panel a,.language-switch__panel span{min-height:32px;display:grid;place-items:center;border:1px solid rgba(184,170,255,.16);border-radius:11px;color:#eaf8ff!important;background:rgba(80,108,220,.14);font-size:13px;font-weight:850;line-height:1;text-decoration:none!important;text-transform:lowercase;}
.language-switch__panel a:hover,.language-switch__panel a:focus-visible{color:#fff!important;border-color:rgba(104,225,255,.42);background:rgba(104,225,255,.16);outline:none;}
.language-switch__panel .is-current{color:#fff!important;border-color:rgba(104,225,255,.54);background:linear-gradient(135deg,rgba(75,92,220,.38),rgba(24,199,216,.22));}
.language-switch__panel .is-disabled{opacity:.45;cursor:not-allowed;}
.topbar {
position:fixed !important;
top:0 !important;
left:0 !important;
right:0 !important;
z-index:2147483000 !important;
display:none;
width:100%;
max-width:100%;
margin:0;
background:
linear-gradient(90deg, #171f52 0%, #0d143f 22%, #040611 44%, #010207 50%, #040611 56%, #0d143f 78%, #171f52 100%) !important;
border-bottom:1px solid rgba(184, 170, 255, .26);
backdrop-filter:blur(18px);
box-shadow:0 12px 34px rgba(20, 24, 72, .18);
opacity:0;
visibility:hidden;
pointer-events:none;
transform:translateY(-100%);
transition:opacity .24s ease, visibility .24s ease, transform .24s ease;
}
.topbar.is-visible {
opacity:1;
visibility:visible;
pointer-events:auto;
transform:translateY(0);
}
.topbar__inner {
min-height:70px;
display:grid;
grid-template-columns:minmax(220px, 1fr) auto minmax(360px, 1fr);
gap:20px;
align-items:center;
}
.brand {
position:relative;
display:inline-flex;
align-items:center;
justify-self:center;
width:58px;
height:58px;
justify-content:center;
text-decoration:none;
color:#edf8ff;
font-size:0;
line-height:0;
}
.brand::before {
content:"";
position:absolute;
inset:-7px;
border-radius:22px;
pointer-events:none;
border:1px solid rgba(104, 225, 255, .48);
box-shadow:
0 0 10px rgba(104, 225, 255, .45),
0 0 22px rgba(104, 225, 255, .28),
0 0 34px rgba(184, 170, 255, .2);
animation:brandGlowPulse 2.6s ease-in-out infinite;
}
.brand__logo {
position:relative;
z-index:1;
width:56px;
height:56px;
flex:0 0 56px;
border-radius:16px;
object-fit:cover;
object-position:center;
border:1px solid rgba(184, 170, 255, .38);
color:transparent;
font-size:0;
box-shadow:
0 0 0 1px rgba(24,199,216,.16),
0 10px 28px rgba(0,0,0,.28),
0 0 24px rgba(24,199,216,.16);
}
@keyframes brandGlowPulse {
0%, 100% {
opacity:.58;
box-shadow:
0 0 8px rgba(104, 225, 255, .32),
0 0 18px rgba(104, 225, 255, .2),
0 0 26px rgba(184, 170, 255, .14);
}
50% {
opacity:1;
box-shadow:
0 0 14px rgba(104, 225, 255, .62),
0 0 30px rgba(104, 225, 255, .38),
0 0 46px rgba(184, 170, 255, .28);
}
}
.nav {
display:flex;
justify-content:flex-end;
align-items:center;
gap:4px;
}
.nav a {
min-height:40px;
display:inline-flex;
align-items:center;
padding:0 12px;
border-radius:999px;
text-decoration:none;
color:#eaf8ff;
font-size:var(--fs-ui);
font-weight:700;
}
.nav a:hover,
.nav a:focus-visible {
background:rgba(232, 251, 255, .12);
color:#bff7ff;
outline:none;
}
.service-menu {
position:relative;
justify-self:start;
}
.service-menu__button {
position:relative;
min-height:44px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:0 15px;
border:1px solid rgba(184, 170, 255, .28);
border-radius:999px;
background:rgba(37, 49, 122, .82);
color:#edfaff;
font:inherit;
font-weight:800;
cursor:pointer;
box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.service-menu__icon {
position:relative;
width:22px;
height:16px;
flex:0 0 22px;
display:block;
color:#eaf8ff;
background:linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat;
pointer-events:none;
}
.service-menu__icon::before,
.service-menu__icon::after {
content:"";
position:absolute;
left:0;
width:100%;
height:2px;
border-radius:999px;
background:currentColor;
box-shadow:0 0 10px rgba(104, 225, 255, .22);
}
.service-menu__icon::before {
top:0;
}
.service-menu__icon::after {
bottom:0;
}
.service-menu__panel {
position:absolute;
top:calc(100% + 12px);
left:0;
width:min(440px, calc(100vw - 24px));
max-height:min(72vh, 620px);
display:none;
grid-template-columns:1fr;
gap:6px;
overflow:auto;
padding:12px;
border:1px solid rgba(184, 170, 255, .26);
border-radius:20px;
background:#17204f;
box-shadow:0 24px 70px rgba(0,0,0,.34);
}
.service-menu.is-open .service-menu__panel {
display:grid;
}
.service-menu__panel a {
min-height:42px;
display:flex;
align-items:center;
justify-content:center;
padding:9px 11px;
border:1px solid rgba(184, 170, 255, .16);
border-radius:12px;
color:#eaf8ff;
background:rgba(86, 119, 214, .16);
text-decoration:none;
text-align:center;
font-size:var(--fs-sm);
font-weight:700;
line-height:1.35;
}
.service-menu__panel a:hover,
.service-menu__panel a:focus-visible {
color:#ffffff;
border-color:rgba(24,199,216,.36);
background:rgba(77, 146, 220, .24);
outline:none;
}
.service-menu__panel a.is-current {
color:#ffffff;
border-color:rgba(104, 225, 255, .5);
background:rgba(76, 95, 216, .42);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.1), 0 0 18px rgba(104, 225, 255, .14);
pointer-events:none;
}
:is(.landing-beta-page, .business-website-page) .service-menu__panel :is(a, a:hover, a:focus, a:focus-visible, a:active, a:visited) {
color:#eaf8ff !important;
}
:is(.landing-beta-page, .business-website-page) .service-menu__panel :is(a.is-current, a.is-current:hover, a.is-current:focus, a.is-current:focus-visible, a.is-current:active, a.is-current:visited) {
color:#ffffff !important;
}
.page-nav-wrap {
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
}
.top-actions {
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
}
.icon-btn {
position:relative;
width:42px;
height:42px;
display:grid;
place-items:center;
border:1px solid var(--line);
border-radius:14px;
background:#d7ecff;
color:var(--green-dark);
text-decoration:none;
box-shadow:0 8px 22px rgba(32, 38, 34, .08);
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.icon-btn:hover,
.icon-btn:focus-visible {
transform:translateY(-2px);
border-color:rgba(76, 95, 216, .42);
box-shadow:
0 12px 28px rgba(76, 95, 216, .16),
0 0 0 1px rgba(93, 219, 255, .22) inset,
0 0 24px rgba(93, 219, 255, .22);
outline:none;
}
.icon-btn:active {
transform:translateY(0) scale(.96);
box-shadow:
0 8px 18px rgba(76, 95, 216, .16),
0 0 0 1px rgba(93, 219, 255, .28) inset;
}
.menu-toggle { display:none; cursor:pointer; }
.btn {
position:relative;
min-height:48px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:9px;
padding:0 18px;
border:1px solid transparent;
border-radius:999px;
text-decoration:none;
font-family:var(--font-display);
font-size:var(--fs-ui);
font-weight:800;
line-height:1;
color:#fff;
background:#4c5fd8;
overflow:hidden;
box-shadow:
0 16px 38px rgba(75, 92, 214, .24),
0 0 0 1px rgba(255,255,255,.28) inset;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn::before {
content:"";
position:absolute;
inset:1px;
border-radius:inherit;
border:1px solid rgba(125, 232, 255, .22);
pointer-events:none;
opacity:.68;
transition:opacity .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.btn::after {
content:"";
position:absolute;
top:15%;
left:-34%;
width:28%;
height:70%;
border-radius:999px;
background:rgba(255, 255, 255, .28);
filter:blur(10px);
transform:skewX(-18deg);
opacity:0;
pointer-events:none;
}
.btn > .icon,
.btn {
z-index:1;
}
.btn:hover,
.btn:focus-visible {
transform:translateY(-2px);
box-shadow:
0 20px 44px rgba(75, 92, 214, .3),
0 0 0 1px rgba(255,255,255,.36) inset,
0 0 30px rgba(24, 199, 216, .28),
0 0 0 5px rgba(93, 219, 255, .08);
outline:none;
}
.btn:hover::before,
.btn:focus-visible::before {
opacity:1;
border-color:rgba(141, 237, 255, .52);
box-shadow:0 0 22px rgba(93, 219, 255, .34);
}
.btn:hover::after,
.btn:focus-visible::after {
animation:buttonGlint .86s ease;
}
.btn:active {
transform:translateY(0) scale(.98);
box-shadow:
0 10px 24px rgba(75, 92, 214, .24),
0 0 0 1px rgba(255,255,255,.34) inset,
0 0 20px rgba(24, 199, 216, .2);
}
@keyframes buttonGlint {
0% { left:-34%; opacity:0; }
18% { opacity:.7; }
100% { left:108%; opacity:0; }
}
.btn--light {
color:#3440a7;
border-color:rgba(103, 87, 216, .18);
background:#d9eeff;
box-shadow:0 12px 30px rgba(71, 69, 132, .1);
}
:is(.landing-beta-page, .business-website-page) :is(.btn, a.btn, .btn:hover, .btn:focus, .btn:focus-visible, .btn:active, .btn:visited) {
color:#fff !important;
background:#4c5fd8 !important;
}
:is(.landing-beta-page, .business-website-page) :is(.btn--light, a.btn--light, .btn--light:hover, .btn--light:focus, .btn--light:focus-visible, .btn--light:active, .btn--light:visited) {
color:#3440a7 !important;
background:#d9eeff !important;
}
:is(.landing-beta-page, .business-website-page) :is(.btn--gold, a.btn--gold, .btn--gold:hover, .btn--gold:focus, .btn--gold:focus-visible, .btn--gold:active, .btn--gold:visited) {
color:#261d08 !important;
background:#e2c06d !important;
}
:is(.landing-beta-page, .business-website-page) :is(.icon-btn, a.icon-btn, .icon-btn:hover, .icon-btn:focus, .icon-btn:focus-visible, .icon-btn:active, .icon-btn:visited) {
color:var(--green-dark) !important;
}
.topbar .icon-btn {
border-color:rgba(184, 170, 255, .28);
color:#eaf8ff;
background:rgba(37, 49, 122, .82);
box-shadow:0 12px 28px rgba(0,0,0,.16);
}
:is(.landing-beta-page, .business-website-page) .topbar :is(.service-menu__button, .service-menu__button:hover, .service-menu__button:focus, .service-menu__button:focus-visible, .service-menu__button:active, .icon-btn, .icon-btn:hover, .icon-btn:focus, .icon-btn:focus-visible, .icon-btn:active) {
color:#eaf8ff !important;
background:transparent !important;
border-color:transparent !important;
}
.btn--gold {
color:#261d08;
background:#e2c06d;
box-shadow:0 16px 38px rgba(200, 155, 54, .24);
}
.hero {
width:100vw;
max-width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
min-height:calc(100svh - 70px);
display:grid;
align-items:end;
position:relative;
isolation:isolate;
overflow:hidden;
color:#fff;
background:url(//etgaric.digital/wp-content/plugins/etgaric-site-assets-20261021/assets/Picz/ServicePages/WebP/Business%20WEbsite/ChatGPT%20Image%20May%2011%2C%202026%2C%2002_09_08%20AM.webp) center/cover no-repeat;
}
.hero::before {
content:"";
position:absolute;
inset:0;
z-index:-1;
background:rgba(14, 22, 38, .64);
}
.hero::after {
content:"";
position:absolute;
inset:auto 0 0;
height:40px;
background:#d9efff;
z-index:-1;
}
.hero__content {
width:var(--wrap);
margin:0 auto;
padding:clamp(76px, 10vw, 126px) 0 84px;
}
h1 {
max-width:880px;
margin:0 0 18px;
font-family:var(--font-display);
color:#fff;
font-size:var(--fs-hero);
font-weight:800;
line-height:1.03;
letter-spacing:0;
text-wrap:balance;
text-shadow:0 4px 24px rgba(0,0,0,.28);
}
h1 span {
display:block;
}
.lead {
max-width:820px;
margin:0;
color:rgba(255,255,255,.88);
font-size:var(--fs-body-lg);
line-height:1.62;
text-shadow:0 2px 18px rgba(0,0,0,.24);
}
.hero__actions {
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:30px;
}
.hero__facts {
width:var(--wrap);
margin:-48px auto 0;
position:relative;
z-index:4;
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:12px;
}
.fact {
min-height:112px;
padding:18px;
border:1px solid rgba(39, 51, 47, .12);
border-radius:18px;
background:#dcefff;
color:var(--ink);
box-shadow:var(--soft-shadow);
backdrop-filter:blur(16px);
}
.fact strong {
display:block;
font-family:var(--font-display);
font-size:var(--fs-subsection);
font-weight:800;
line-height:1.12;
color:var(--green-dark);
}
.fact span {
display:block;
margin-top:7px;
color:#405367;
font-size:var(--fs-ui);
font-weight:600;
line-height:1.45;
}
main {
position:relative;
overflow:hidden;
}
.section {
scroll-margin-top:82px;
padding:clamp(56px, 8vw, 92px) 0;
position:relative;
overflow:hidden;
background:rgba(223, 242, 255, .9);
}
.section::before,
.section::after {
content:"";
position:absolute;
z-index:0;
pointer-events:none;
opacity:.55;
}
.section::before {
left:-7rem;
top:-7rem;
width:22rem;
height:22rem;
border-radius:44% 56% 62% 38%;
background:rgba(111, 214, 248, .22);
}
.section::after {
right:-8rem;
bottom:-8rem;
width:24rem;
height:24rem;
border-radius:58% 42% 38% 62%;
background:rgba(155, 147, 236, .16);
}
#problem::before {
left:-5rem;
top:2rem;
width:20rem;
height:20rem;
border-radius:50%;
opacity:.42;
}
#problem::after {
right:5vw;
bottom:-9rem;
width:22rem;
height:22rem;
border-radius:22% 78% 28% 72%;
transform:rotate(18deg);
}
#value::before {
left:auto;
right:8vw;
top:-8rem;
width:24rem;
height:24rem;
border-radius:64% 36% 52% 48%;
}
#value::after {
right:auto;
left:-8rem;
bottom:-7rem;
width:21rem;
height:21rem;
border-radius:34% 66% 70% 30%;
}
#included::before {
left:-6rem;
top:5rem;
width:18rem;
height:18rem;
border-radius:0 0 80% 0;
transform:rotate(45deg);
opacity:.34;
}
#included::after {
right:7vw;
bottom:-10rem;
width:26rem;
height:26rem;
border-radius:50%;
opacity:.38;
}
#process::before {
left:auto;
right:-8rem;
top:-4rem;
width:22rem;
height:22rem;
border-radius:58% 42% 64% 36%;
}
#process::after {
right:auto;
left:6vw;
bottom:-9rem;
width:24rem;
height:24rem;
border-radius:18% 82% 22% 78%;
transform:rotate(12deg);
}
#geo::before {
left:-4rem;
top:3rem;
width:18rem;
height:18rem;
border-radius:28% 72% 50% 50%;
transform:rotate(30deg);
}
#geo::after {
right:-7rem;
bottom:3rem;
width:23rem;
height:23rem;
border-radius:50% 50% 12% 88%;
opacity:.42;
}
#bundle::before,
#faq::before,
#contact::before {
border-radius:50% 50% 12% 88%;
transform:rotate(-16deg);
}
#bundle::after,
#faq::after,
#contact::after {
border-radius:18% 82% 24% 76%;
transform:rotate(16deg);
}
.section > .wrap {
position:relative;
z-index:3;
}
.section--tight {
padding-top:42px;
}
#problem {
background:rgba(223, 242, 255, .9);
}
#value {
background:rgba(215, 237, 255, .9);
}
#included {
background:rgba(225, 233, 255, .9);
}
#process {
background:rgba(220, 239, 255, .9);
}
#bundle {
background:rgba(216, 240, 255, .9);
}
#faq {
background:rgba(229, 232, 255, .9);
}
#contact {
background:rgba(217, 239, 255, .94);
}
.section--warm {
background:rgba(220, 239, 255, .9);
}
.section--green {
color:var(--text);
background:rgba(216, 238, 255, .9);
}
.section__head {
display:grid;
grid-template-columns:minmax(0, .72fr) minmax(260px, .28fr);
gap:26px;
align-items:end;
margin-bottom:28px;
}
.section h2 {
margin:0;
font-family:var(--font-display);
color:var(--ink);
font-size:var(--fs-section);
font-weight:800;
line-height:1.12;
letter-spacing:0;
text-wrap:balance;
}
.section--green h2,
.section--green .section-kicker,
.section--green .section-note {
color:var(--ink);
}
.section-kicker {
display:inline-flex;
align-items:center;
gap:8px;
margin:0 0 10px;
color:#4150ba;
font-family:var(--font-display);
font-weight:800;
font-size:var(--fs-sm);
text-transform:uppercase;
letter-spacing:.06em;
}
.section-note {
margin:0;
color:var(--muted);
font-size:var(--fs-body-lg);
line-height:1.62;
}
.intro-grid {
display:grid;
grid-template-columns:minmax(0, .95fr) minmax(280px, .55fr);
gap:22px;
align-items:stretch;
}
.story {
position:relative;
overflow:hidden;
padding:clamp(24px, 4vw, 42px);
border:1px solid var(--line);
border-radius:var(--radius);
background:#dff1ff;
box-shadow:var(--soft-shadow);
}
.story::after {
content:"";
position:absolute;
right:-70px;
bottom:-86px;
width:220px;
height:220px;
border-radius:44% 56% 48% 52%;
background:rgba(155,147,236,.14);
pointer-events:none;
}
.story > * {
position:relative;
z-index:1;
}
.story p {
margin:0;
font-size:var(--fs-body-lg);
line-height:1.7;
color:#30403b;
}
.story p + p { margin-top:18px; }
.price {
position:relative;
overflow:hidden;
padding:28px;
border:1px solid rgba(200, 155, 54, .25);
border-radius:var(--radius);
background:#d9edff;
box-shadow:var(--shadow);
}
.price::before,
.price::after {
content:"";
position:absolute;
pointer-events:none;
}
.price::before {
left:-72px;
top:-76px;
width:190px;
height:190px;
border-radius:48% 52% 58% 42%;
background:rgba(226,192,109,.24);
}
.price::after {
right:-64px;
bottom:-72px;
width:210px;
height:210px;
border-radius:62% 38% 42% 58%;
background:rgba(111,214,248,.2);
}
.price > * {
position:relative;
z-index:1;
}
.price__label {
color:#684f12;
font-family:var(--font-display);
font-size:var(--fs-sm);
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}
.price__value {
margin:10px 0 12px;
font-family:var(--font-display);
color:#251b07;
font-size:var(--fs-price);
line-height:1.1;
font-weight:800;
}
.price p {
margin:0;
color:#5a4920;
font-weight:600;
}
.media-band {
display:grid;
grid-template-columns:1fr;
gap:22px;
align-items:start;
}
.media-copy {
display:grid;
gap:14px;
max-width:920px;
}
.media-copy p {
margin:0;
font-size:var(--fs-body-lg);
line-height:1.68;
color:#34423e;
}
.image-frame {
position:relative;
width:100%;
max-width:100%;
margin-left:0 !important;
margin-right:0 !important;
grid-column:1 / -1;
}
.image-frame img {
width:100%;
height:auto;
object-fit:contain;
overflow:hidden;
border:0;
border-radius:0;
box-shadow:0 22px 58px rgba(71, 69, 132, .12);
background:#edf6ff;
}
.image-frame__label {
width:var(--wrap);
margin:8px auto 0;
padding:0 2px;
color:#76817c;
background:transparent;
font-size:var(--fs-sm);
line-height:1.35;
font-weight:600;
}
.feature-grid,
.include-grid,
.process-grid,
.geo-grid,
.link-grid {
display:grid;
gap:14px;
}
.feature-grid {
grid-template-columns:repeat(3, minmax(0, 1fr));
}
.include-grid {
grid-template-columns:repeat(3, minmax(0, 1fr));
}
.process-grid {
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:18px;
}
.geo-grid {
grid-template-columns:1.05fr .95fr;
align-items:stretch;
}
.link-grid {
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.card {
position:relative;
overflow:hidden;
min-width:0;
min-height:132px;
padding:20px;
border:1px solid var(--line);
border-radius:18px;
background:#dcefff;
box-shadow:0 12px 30px rgba(71, 69, 132, .09);
}
.card::after {
content:"";
position:absolute;
right:-72px;
bottom:-82px;
width:190px;
height:190px;
border-radius:42% 58% 52% 48%;
background:rgba(111, 214, 248, .16);
pointer-events:none;
}
.card > * {
position:relative;
z-index:1;
}
.card__icon {
width:42px;
height:42px;
display:grid;
place-items:center;
margin-bottom:14px;
border-radius:14px;
color:#4451bd;
background:#e9e8ff;
box-shadow:0 10px 22px rgba(103, 87, 216, .12);
}
.card h3 {
margin:0 0 8px;
font-family:var(--font-display);
color:var(--ink);
font-size:var(--fs-card-title);
font-weight:800;
line-height:1.28;
}
.card p,
.card li {
color:#4b5c59;
font-size:var(--fs-base);
font-weight:600;
line-height:1.58;
}
.card p { margin:0; }
.card ul {
display:grid;
gap:11px;
margin:0;
padding:0;
list-style:none;
}
.card li {
position:relative;
padding-left:21px;
}
.card li::before {
content:"";
position:absolute;
left:0;
top:.65em;
width:8px;
height:8px;
border-radius:50%;
background:#5866d7;
box-shadow:0 0 0 5px rgba(103, 87, 216, .1);
}
.include-column {
min-height:100%;
}
.include-column h3 {
display:flex;
align-items:center;
gap:9px;
}
.process-step {
position:relative;
min-height:218px;
display:grid;
align-content:start;
gap:18px;
padding:26px;
overflow:hidden;
border-color:rgba(103, 87, 216, .14);
background:#dcefff;
backdrop-filter:blur(16px);
isolation:isolate;
}
.process-step::before {
content:"";
position:absolute;
inset:-40% auto auto -18%;
width:230px;
height:230px;
border-radius:50%;
background:rgba(111, 214, 248, .18);
opacity:.9;
pointer-events:none;
z-index:-1;
animation:processGlow 9s ease-in-out infinite alternate;
}
.process-step::after {
content:"";
position:absolute;
right:-48px;
bottom:-58px;
width:190px;
height:190px;
border-radius:48px;
background:rgba(155, 147, 236, .14);
transform:rotate(18deg);
pointer-events:none;
z-index:-1;
animation:processFloat 11s ease-in-out infinite alternate;
}
@keyframes processGlow {
from { transform:translate3d(0,0,0) scale(1); opacity:.72; }
to { transform:translate3d(28px,18px,0) scale(1.12); opacity:1; }
}
@keyframes processFloat {
from { transform:rotate(18deg) translate3d(0,0,0); }
to { transform:rotate(24deg) translate3d(-16px,-10px,0); }
}
.process-step__head {
position:relative;
z-index:1;
display:flex;
align-items:flex-start;
gap:14px;
}
.process-step__icon {
width:50px;
height:50px;
flex:0 0 50px;
display:grid;
place-items:center;
border:1px solid rgba(103,87,216,.16);
border-radius:18px;
color:#4053c6;
background:#e9e8ff;
box-shadow:0 14px 28px rgba(77, 89, 190, .14);
}
.process-step__title {
min-width:0;
}
.process-step__meta {
display:block;
margin:2px 0 6px;
color:#77827f;
font-family:var(--font-display);
font-size:var(--fs-xs);
font-weight:800;
letter-spacing:.06em;
text-transform:uppercase;
}
.process-step .process-step__head h3 {
margin:0;
font-family:var(--font-display);
color:#171d35;
font-size:var(--fs-subsection);
font-weight:800;
line-height:1.18;
}
.process-step p {
position:relative;
z-index:1;
margin:0;
font-size:var(--fs-body-lg);
line-height:1.62;
color:#52615f;
}
.geo-panel {
position:relative;
overflow:hidden;
min-height:100%;
padding:clamp(22px, 3.2vw, 32px);
border:1px solid rgba(103, 87, 216, .1);
border-radius:var(--radius);
background:#d9ecfa;
}
.geo-panel::before,
.geo-panel::after {
content:"";
position:absolute;
pointer-events:none;
}
.geo-panel::before {
left:-76px;
top:-82px;
width:210px;
height:210px;
border-radius:46% 54% 60% 40%;
background:rgba(111,214,248,.2);
}
.geo-panel::after {
right:-70px;
bottom:-82px;
width:220px;
height:220px;
border-radius:58% 42% 40% 60%;
background:rgba(155,147,236,.15);
}
.geo-panel > * {
position:relative;
z-index:1;
}
.geo-panel h2 {
max-width:760px;
margin-bottom:16px;
font-family:var(--font-display);
color:#1d2730;
font-size:var(--fs-subsection);
font-weight:700;
line-height:1.2;
}
.geo-panel p {
margin:0;
color:#4f5f5d;
font-size:var(--fs-base);
line-height:1.68;
}
.geo-panel p + p { margin-top:16px; }
.cta-panel {
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
gap:20px;
align-items:center;
padding:clamp(24px, 4vw, 40px);
border-radius:var(--radius);
color:#fff;
background:
radial-gradient(circle at 18% 15%, rgba(255,255,255,.16), transparent 12rem),
linear-gradient(135deg, #354bba, #087d9b);
box-shadow:var(--shadow);
}
.cta-panel h2 {
margin:0 0 10px;
font-family:var(--font-display);
color:#fff;
font-size:var(--fs-section);
font-weight:800;
line-height:1.12;
}
.cta-panel p {
margin:0;
color:rgba(255,255,255,.82);
font-size:var(--fs-body-lg);
line-height:1.62;
}
.cta-panel__actions {
display:flex;
flex-wrap:wrap;
justify-content:flex-end;
gap:10px;
}
.faq {
display:grid;
gap:10px;
}
.faq details {
position:relative;
border:1px solid var(--line);
border-radius:18px;
background:#dcefff;
box-shadow:0 10px 28px rgba(71, 69, 132, .08);
overflow:hidden;
}
.faq details::after {
content:"";
position:absolute;
right:-64px;
bottom:-82px;
width:180px;
height:180px;
border-radius:46% 54% 62% 38%;
background:rgba(155,147,236,.12);
pointer-events:none;
}
.faq details > * {
position:relative;
z-index:1;
}
.faq summary {
min-height:64px;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
padding:16px 20px;
color:var(--ink);
cursor:pointer;
font-family:var(--font-display);
font-weight:700;
line-height:1.35;
list-style:none;
}
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after {
content:"+";
width:30px;
height:30px;
flex:0 0 30px;
display:grid;
place-items:center;
border-radius:50%;
color:var(--green-dark);
background:rgba(103, 87, 216, .1);
font-size:20px;
line-height:1;
}
.faq details[open] summary::after {
content:"-";
}
.faq p {
margin:0;
padding:0 20px 20px;
color:var(--muted);
font-size:var(--fs-base);
font-weight:500;
line-height:1.62;
}
.service-directory {
position:relative;
margin-top:18px;
border:1px solid var(--line);
border-radius:18px;
background:#dcefff;
overflow:hidden;
}
.service-directory::after {
content:"";
position:absolute;
right:-78px;
bottom:-96px;
width:230px;
height:230px;
border-radius:58% 42% 44% 56%;
background:rgba(111,214,248,.14);
pointer-events:none;
}
.service-directory > * {
position:relative;
z-index:1;
}
.service-directory summary {
position:relative;
overflow:hidden;
cursor:pointer;
display:grid;
grid-template-columns:minmax(0, 1fr) auto;
align-items:center;
gap:16px;
padding:16px 18px;
color:var(--ink);
font-family:var(--font-display);
font-weight:700;
list-style:none;
background:#e7f5ff;
transition:border-color .24s ease, background .24s ease, box-shadow .24s ease, transform .2s ease;
}
.service-directory summary::-webkit-details-marker { display:none; }
.service-directory summary:hover,
.service-directory summary:focus-visible {
background:#e6e6ff;
outline:none;
box-shadow:inset 0 0 0 1px rgba(103, 87, 216, .16);
}
.service-directory summary::before {
content:"";
position:absolute;
inset:0;
border-radius:inherit;
border:1px solid rgba(103, 87, 216, .16);
opacity:.72;
pointer-events:none;
}
.service-directory summary::after {
content:"";
position:absolute;
left:18px;
right:18px;
bottom:0;
height:2px;
border-radius:999px;
background:#4c5fd8;
opacity:.56;
transform:scaleX(.18);
transform-origin:left center;
animation:directoryLine 2.4s ease-in-out infinite;
pointer-events:none;
}
.service-directory[open] summary {
border-bottom:1px solid rgba(103, 87, 216, .12);
}
.service-directory__summary-text {
display:grid;
gap:3px;
min-width:0;
}
.service-directory__summary-title {
font-size:var(--fs-body-lg);
font-weight:800;
line-height:1.22;
}
.service-directory__summary-hint {
color:#52615f;
font-family:var(--font-body);
font-size:var(--fs-sm);
font-weight:600;
line-height:1.35;
}
.service-directory__summary-action {
position:relative;
min-height:42px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:10px;
padding:0 15px;
border:1px solid rgba(103, 87, 216, .22);
border-radius:999px;
color:#fff;
background:#4c5fd8;
box-shadow:
0 12px 28px rgba(76, 95, 216, .24),
0 0 0 1px rgba(255,255,255,.22) inset;
white-space:nowrap;
animation:directoryPulse 2.2s ease-in-out infinite;
}
.service-directory__summary-lines {
width:22px;
display:grid;
gap:4px;
}
.service-directory__summary-lines span {
height:2px;
border-radius:999px;
background:currentColor;
opacity:.9;
transform-origin:left center;
animation:directoryBars 1.45s ease-in-out infinite;
}
.service-directory__summary-lines span:nth-child(2) {
width:75%;
animation-delay:.12s;
}
.service-directory__summary-lines span:nth-child(3) {
width:52%;
animation-delay:.24s;
}
.service-directory__summary-action-text::before {
content:"פתח";
}
.service-directory[open] .service-directory__summary-action {
background:#354bba;
animation:none;
}
.service-directory[open] .service-directory__summary-action-text::before {
content:"סגור";
}
@keyframes directoryPulse {
0%, 100% { box-shadow:0 12px 28px rgba(76, 95, 216, .2), 0 0 0 1px rgba(255,255,255,.22) inset; }
50% { box-shadow:0 16px 34px rgba(76, 95, 216, .32), 0 0 0 1px rgba(255,255,255,.32) inset, 0 0 24px rgba(24, 199, 216, .2); }
}
@keyframes directoryBars {
0%, 100% { transform:scaleX(.72); opacity:.65; }
45% { transform:scaleX(1); opacity:1; }
}
@keyframes directoryLine {
0%, 100% { transform:scaleX(.18); opacity:.38; }
45% { transform:scaleX(1); opacity:.72; }
}
.service-directory__grid {
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:8px;
padding:0 20px 20px;
}
.service-directory a,
.link-card {
min-height:58px;
display:flex;
align-items:center;
gap:10px;
padding:12px 14px;
border:1px solid var(--line);
border-radius:14px;
background:#e7f5ff;
color:var(--ink);
text-decoration:none;
font-family:var(--font-display);
font-size:var(--fs-ui);
font-weight:700;
line-height:1.32;
}
.service-directory a:hover,
.link-card:hover,
.service-directory a:focus-visible,
.link-card:focus-visible {
border-color:rgba(103, 87, 216, .24);
color:var(--green-dark);
background:#e6e6ff;
outline:none;
box-shadow:0 10px 24px rgba(103, 87, 216, .1);
}
.service-directory a.is-current {
border-color:rgba(76, 95, 216, .34);
color:#2531a4;
background:#dfe6ff;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.3), 0 10px 24px rgba(76, 95, 216, .12);
pointer-events:none;
}
:is(.landing-beta-page, .business-website-page) :is(.service-directory a, .service-directory a:hover, .service-directory a:focus, .service-directory a:focus-visible, .service-directory a:active, .service-directory a:visited, .link-card, .link-card:hover, .link-card:focus, .link-card:focus-visible, .link-card:active, .link-card:visited) {
color:var(--ink) !important;
}
:is(.landing-beta-page, .business-website-page) :is(.service-directory a.is-current, .service-directory a.is-current:hover, .service-directory a.is-current:focus, .service-directory a.is-current:focus-visible, .service-directory a.is-current:active, .service-directory a.is-current:visited) {
color:#2531a4 !important;
}
.service-next {
position:relative;
overflow:hidden;
padding:42px 0 104px;
background:#d7edff;
border-top:1px solid rgba(76, 95, 216, .12);
}
.service-next::before,
.service-next::after {
content:"";
position:absolute;
pointer-events:none;
border-radius:40% 60% 55% 45%;
opacity:.55;
}
.service-next::before {
left:-10vw;
top:-44px;
width:34vw;
height:190px;
background:#bdeeff;
}
.service-next::after {
right:-8vw;
bottom:-70px;
width:32vw;
height:210px;
background:#d9d8ff;
}
.service-next__row {
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:14px;
max-width:760px;
}
.service-next__link {
min-height:104px;
display:grid;
align-content:center;
gap:7px;
padding:20px 22px;
border:1px solid rgba(76, 95, 216, .16);
border-radius:22px;
background:rgba(232, 247, 255, .78);
color:var(--ink);
text-decoration:none;
box-shadow:0 16px 38px rgba(71, 69, 132, .11);
backdrop-filter:blur(10px);
transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.service-next__label {
color:#354bba;
font-family:var(--font-display);
font-size:var(--fs-xs);
font-weight:800;
line-height:1.2;
letter-spacing:.08em;
text-transform:uppercase;
}
.service-next__title {
color:var(--ink);
font-family:var(--font-display);
font-size:var(--fs-card-title);
font-weight:800;
line-height:1.28;
}
.service-next__link:hover,
.service-next__link:focus-visible {
transform:translateY(-3px);
border-color:rgba(76, 95, 216, .3);
background:#e6f6ff;
outline:none;
box-shadow:0 20px 46px rgba(71, 69, 132, .16), 0 0 24px rgba(104, 225, 255, .16);
}
:is(.landing-beta-page, .business-website-page) :is(.service-next__link, .service-next__link:hover, .service-next__link:focus, .service-next__link:focus-visible, .service-next__link:active, .service-next__link:visited) {
color:var(--ink) !important;
}
.mobile-cta {
position:fixed;
left:0;
right:0;
bottom:0;
z-index:50;
display:none;
grid-template-columns:1fr 46px 46px 46px;
gap:7px;
padding:7px 10px max(7px, env(safe-area-inset-bottom));
border:1px solid rgba(39, 51, 47, .12);
border-right:0;
border-bottom:0;
border-left:0;
border-radius:20px 20px 0 0;
background:rgba(219, 240, 255, .96);
box-shadow:0 -10px 32px rgba(32, 38, 34, .16);
backdrop-filter:blur(16px);
opacity:0;
pointer-events:none;
transform:translateY(100%);
transition:opacity .2s ease, transform .2s ease;
}
.mobile-cta.is-visible {
opacity:1;
pointer-events:auto;
transform:none;
}
.mobile-cta .icon-btn {
width:46px;
height:46px;
background:#d7e8ff;
}
.mobile-cta .language-switch {
display:grid;
place-items:center;
position:relative;
}
.mobile-cta .language-switch summary.icon-btn {
list-style:none;
cursor:pointer;
}
.mobile-cta .language-switch summary.icon-btn::-webkit-details-marker {
display:none;
}
.mobile-cta .language-switch__panel {
top:auto;
right:0;
bottom:calc(100% + 8px);
left:auto;
width:54px;
transform:none;
z-index:60;
}
.reveal {
opacity:0;
transform:translate3d(0, 22px, 0);
transition:
opacity .62s ease,
transform .62s cubic-bezier(.2, .72, .24, 1);
transition-delay:var(--reveal-delay, 0ms);
}
.reveal.is-visible {
opacity:1;
transform:translate3d(0, 0, 0);
} @media (min-width:1240px) {
.desktop-header__inner {
grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr) !important;
}
.desktop-header__nav {
justify-self:end !important;
min-width:0 !important;
}
.desktop-brand {
justify-self:center !important;
}
.desktop-header__actions {
width:auto !important;
min-width:0 !important;
justify-self:start !important;
}
}
@media (max-width: 980px) { .desktop-header {
display:none;
}
.topbar {
--topbar-icon-size:18px;
--topbar-service-icon-size:16px;
display:block;
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none;
}
:root {
--mobile-sticky-header-offset:78px;
}
body {
padding-bottom:64px;
}
.hero__content {
padding-top:calc(48px + var(--mobile-sticky-header-offset, 78px));
}
.mobile-cta {
display:grid;
}
.topbar__inner {
grid-template-columns:40px minmax(0, 1fr) 40px;
min-height:62px;
}
.topbar .service-menu__button,
.topbar .menu-toggle {
width:40px;
height:40px;
display:grid;
place-items:center;
justify-content:center;
padding:0;
gap:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
line-height:0;
}
.topbar .service-menu__icon {
width:var(--topbar-service-icon-size);
height:12px;
flex-basis:var(--topbar-service-icon-size);
}
.service-menu__button .service-menu__label {
display:none;
}
.topbar__inner {
grid-template-columns:auto 1fr auto;
justify-content:space-between;
gap:10px;
}
.menu-toggle { display:grid; }
.nav {
position:absolute;
top:calc(100% + 1px);
left:16px;
right:16px;
display:none;
grid-template-columns:1fr;
gap:6px;
padding:12px;
border:1px solid var(--line);
border-radius:18px;
background:#17204f;
box-shadow:0 24px 70px rgba(0,0,0,.28);
}
.nav.is-open { display:grid; }
.nav a {
justify-content:flex-start;
min-height:44px;
background:rgba(86, 119, 214, .16);
}
.page-nav-wrap {
justify-content:flex-end;
}
.hero {
min-height:auto;
align-items:end;
}
.hero__content {
padding:88px 0 88px;
}
.hero__facts,
.section__head,
.intro-grid,
.media-band,
.geo-grid,
.cta-panel {
grid-template-columns:1fr;
}
.feature-grid,
.include-grid,
.process-grid,
.link-grid,
.service-directory__grid {
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.cta-panel__actions {
justify-content:flex-start;
}
}
@media (min-width: 981px) {
.desktop-header {
display:block;
}
.section {
padding:clamp(48px, 6vw, 74px) 0;
}
.section--tight {
padding-top:32px;
}
.section__head {
margin-bottom:24px;
}
#process,
#bundle,
#faq {
padding-top:58px;
padding-bottom:58px;
}
}
@media (max-width: 640px) {
.topbar {
--topbar-icon-size:18px;
--topbar-service-icon-size:16px;
display:block;
}
.topbar {
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none;
}
:root {
--wrap:min(100% - 24px, 1160px);
--mobile-sticky-header-offset:78px;
--fs-body-lg:16px;
--fs-card-title:17px;
--fs-section:clamp(26px, 7vw, 31px);
--fs-subsection:22px;
--fs-price:clamp(28px, 8vw, 34px);
}
body {
padding-bottom:64px;
}
.topbar__inner {
grid-template-columns:40px minmax(0, 1fr) 40px;
min-height:62px;
}
.topbar .icon {
width:21px;
height:21px;
min-width:21px;
margin:0;
}
.brand {
width:50px;
height:50px;
}
.brand__logo {
width:48px;
height:48px;
flex-basis:48px;
border-radius:14px;
}
.topbar .service-menu__button {
width:40px;
height:40px;
display:grid;
place-items:center;
justify-content:center;
padding:0;
gap:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
line-height:0;
}
.topbar .service-menu__icon {
width:var(--topbar-service-icon-size);
height:12px;
flex-basis:var(--topbar-service-icon-size);
}
.image-frame {
width:calc(100% + 24px);
max-width:calc(100% + 24px);
margin-left:-12px !important;
margin-right:-12px !important;
}
.page-nav-wrap {
width:40px;
display:grid;
place-items:center;
justify-self:end;
}
.topbar .menu-toggle {
width:40px;
height:40px;
padding:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
place-items:center;
line-height:0;
}
.menu-toggle .icon {
grid-area:1 / 1;
}
.menu-toggle .icon--page-nav {
width:var(--topbar-icon-size);
height:var(--topbar-icon-size);
min-width:var(--topbar-icon-size);
}
.service-menu__button .service-menu__label {
display:none;
}
.service-menu__panel {
position:fixed;
top:74px;
left:12px;
right:12px;
width:auto;
max-height:calc(100dvh - 96px);
z-index:95;
}
.hero {
background-position:center top;
}
.hero__content {
padding:calc(48px + var(--mobile-sticky-header-offset, 78px)) 0 72px;
text-align:center;
}
h1 {
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:clamp(29px, 8vw, 34px);
line-height:1.1;
text-wrap:wrap;
overflow-wrap:break-word;
}
.lead {
margin-left:auto;
margin-right:auto;
text-align:center;
font-size:var(--fs-base);
line-height:1.62;
}
.hero__actions {
display:grid;
grid-template-columns:1fr 1fr;
margin-top:22px;
}
.hero__actions .btn:first-child {
grid-column:1 / -1;
}
.btn {
width:100%;
min-height:48px;
}
.hero__actions .btn--light {
min-height:44px;
font-size:var(--fs-ui);
}
.hero__facts {
margin-top:-32px;
grid-template-columns:1fr;
text-align:center;
}
.fact {
text-align:center;
}
.section {
padding:50px 0;
text-align:center;
}
.section--tight {
padding-top:28px;
}
.story,
.price,
.cta-panel,
.geo-panel {
padding:22px;
border-radius:18px;
text-align:center;
}
.section__head,
.media-copy,
.media-band {
text-align:center;
}
.section-kicker {
justify-content:center;
margin-left:auto;
margin-right:auto;
}
.section h2,
.section-note,
.media-copy p,
.story p,
.price p,
.geo-panel p,
.cta-panel p {
text-align:center;
}
.price__label,
.price__value {
text-align:center;
}
.feature-grid,
.include-grid,
.process-grid,
.link-grid,
.service-directory__grid {
grid-template-columns:1fr;
}
#value .feature-grid .card {
text-align:center;
}
#value .feature-grid .card__icon {
margin-left:auto;
margin-right:auto;
}
.include-column ul {
gap:13px;
}
.include-column h3 {
justify-content:center;
text-align:center;
}
.include-column li {
color:#40514e;
font-weight:600;
line-height:1.62;
text-align:left;
}
.card {
text-align:center;
}
.card__icon {
margin-left:auto;
margin-right:auto;
}
.card h3,
.card p {
text-align:center;
}
.include-column .card li,
.include-column li {
text-align:left;
padding-left:21px;
}
.include-column .card li::before,
.include-column li::before {
position:absolute;
left:0;
top:.65em;
display:block;
margin:0;
}
.process-step {
min-height:0;
padding:20px;
gap:13px;
}
.process-step::after {
right:-62px;
bottom:-70px;
width:170px;
height:170px;
}
.process-step__head {
justify-content:center;
text-align:center;
align-items:center;
gap:12px;
flex-direction:column;
}
.process-step__icon {
width:48px;
height:48px;
flex-basis:48px;
}
.process-step .process-step__head h3,
.process-step p {
text-align:center;
}
.process-step p {
font-size:var(--fs-base);
}
.image-frame__label {
font-size:var(--fs-xs);
text-align:center;
}
.faq summary {
align-items:center;
justify-content:space-between;
text-align:left;
}
.faq p {
text-align:left;
}
.link-card,
.service-directory a,
.service-directory summary {
justify-content:center;
text-align:center;
}
.service-directory summary {
grid-template-columns:1fr;
gap:12px;
padding:16px;
}
.service-directory__summary-text {
justify-items:center;
}
.service-directory__summary-action {
justify-self:center;
min-width:168px;
}
.cta-panel__actions {
justify-content:center;
}
.service-next {
padding:36px 0 118px;
}
.service-next__row {
grid-template-columns:1fr;
text-align:center;
}
.service-next__link {
min-height:92px;
border-radius:20px;
}
.mobile-cta {
display:grid;
}
.mobile-cta .btn {
min-height:46px;
padding:0 12px;
font-size:var(--fs-ui);
}
.reveal {
transform:translate3d(0, 38px, 0) scale(.985);
transition:
opacity .74s ease,
transform .74s cubic-bezier(.16, .82, .22, 1);
transition-delay:var(--reveal-delay, 0ms);
will-change:opacity, transform;
}
.reveal.is-visible {
transform:translate3d(0, 0, 0) scale(1);
}
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
scroll-behavior:auto !important;
transition:none !important;
animation:none !important;
}
.reveal {
opacity:1;
transform:none;
}
}
.etg-site-footer {
margin: 14px 0 0;
padding: clamp(26px, 4vw, 42px) clamp(16px, 3vw, 28px);
border: 1px solid rgba(184, 170, 255, .22);
border-radius: 24px 24px 0 0;
background:
radial-gradient(circle at 50% 0%, rgba(33, 230, 255, .12), transparent 18rem),
linear-gradient(90deg, #171f52 0%, #0d143f 22%, #040611 44%, #010207 50%, #040611 56%, #0d143f 78%, #171f52 100%);
color: #eaf8ff;
box-shadow: 0 -12px 36px rgba(5, 12, 38, .20), inset 0 1px 0 rgba(255,255,255,.08);
direction: rtl;
isolation: isolate;
}
.etg-site-footer,
.etg-site-footer * {
box-sizing: border-box;
}
.etg-footer-grid {
display: grid;
grid-template-columns: minmax(240px, 1.15fr) minmax(220px, .8fr) minmax(220px, .8fr);
gap: clamp(20px, 4vw, 42px);
align-items: start;
}
.etg-footer-brand,
.etg-footer-col,
.etg-footer-services-details,
.etg-footer-links,
.etg-footer-contact {
display: grid;
}
.etg-footer-brand {
gap: 14px;
justify-items: start;
}
.etg-footer-logo-row {
display: inline-flex;
align-items: center;
gap: 12px;
}
.etg-footer-logo {
width: 58px;
height: 58px;
border-radius: 16px;
object-fit: cover;
box-shadow: 0 0 12px rgba(33, 230, 255, .42), 0 0 24px rgba(76, 95, 216, .28);
}
.etg-footer-brand strong {
display: block;
color: #fff !important;
font-size: 23px;
line-height: 1.05;
font-weight: 950;
}
.etg-footer-brand span {
display: block;
margin-top: 3px;
color: rgba(234, 248, 255, .72) !important;
font-size: 13px;
font-weight: 800;
letter-spacing: .04em;
text-transform: uppercase;
}
.etg-footer-brand p,
.etg-footer-bottom {
margin: 0;
color: rgba(234, 248, 255, .74) !important;
font-size: 15px;
font-weight: 750;
line-height: 1.55;
}
.etg-footer-col {
gap: 10px;
}
.etg-footer-col h3 {
margin: 0 0 2px;
color: #fff !important;
font-size: 16px;
line-height: 1.15;
font-weight: 950;
}
.etg-footer-services-details,
.etg-footer-links,
.etg-footer-contact {
gap: 8px;
}
.etg-footer-services-details summary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 38px;
width: fit-content;
padding: 9px 14px;
border: 1px solid rgba(184, 170, 255, .18);
border-radius: 999px;
background: rgba(255, 255, 255, .07);
color: #f0fbff !important;
font-size: 14px;
font-weight: 950;
line-height: 1.15;
cursor: pointer;
list-style: none;
}
.etg-footer-services-details summary::-webkit-details-marker {
display: none;
}
.etg-footer-services-details summary::after {
content: "";
width: 7px;
height: 7px;
margin-inline-start: 9px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg) translateY(-1px);
transition: transform .18s ease;
}
.etg-footer-services-details[open] summary::after {
transform: rotate(225deg) translateY(-1px);
}
.etg-footer-links a,
.etg-footer-contact a {
display: inline-flex;
align-items: center;
gap: 8px;
width: fit-content;
max-width: 100%;
color: rgba(234, 248, 255, .82) !important;
font-size: 14px;
font-weight: 850;
line-height: 1.25;
text-decoration: none !important;
}
.etg-footer-links a:hover,
.etg-footer-contact a:hover,
.etg-footer-links a:focus-visible,
.etg-footer-contact a:focus-visible {
color: #fff !important;
outline: none;
text-shadow: 0 0 14px rgba(33, 230, 255, .34);
}
.etg-footer-contact a {
min-height: 40px;
padding: 8px 11px;
border: 1px solid rgba(184, 170, 255, .16);
border-radius: 999px;
background: rgba(255,255,255,.055);
}
.etg-footer-phone {
direction: ltr;
unicode-bidi: bidi-override;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.etg-footer-contact a[href^="tel:"] {
direction: ltr;
unicode-bidi: isolate;
}
.etg-footer-contact .icon {
width: 18px;
height: 18px;
min-width: 18px;
}
.etg-footer-bottom {
display: flex;
justify-content: space-between;
gap: 14px;
margin-top: 28px;
padding-top: 18px;
border-top: 1px solid rgba(184, 170, 255, .18);
}
@media (max-width: 640px) {
body {
padding-bottom: 0;
}
.etg-site-footer {
width: 100vw;
margin: 10px calc(50% - 50vw) 0;
padding: 16px 16px calc(88px + env(safe-area-inset-bottom));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 22px 22px 0 0;
background:
radial-gradient(circle at 50% 0%, rgba(33, 230, 255, .14), transparent 13rem),
linear-gradient(90deg, #171f52 0%, #081036 28%, #02040d 50%, #081036 72%, #171f52 100%);
box-shadow: 0 -12px 36px rgba(5, 12, 38, .22), inset 0 1px 0 rgba(255,255,255,.08);
}
.etg-footer-grid {
grid-template-columns: 1fr;
gap: 14px;
text-align: center;
justify-items: center;
}
.etg-footer-brand { order: 1; }
.etg-footer-contact-col { order: 2; }
.etg-footer-services { order: 3; }
.etg-footer-brand,
.etg-footer-col,
.etg-footer-links,
.etg-footer-contact {
justify-items: center;
}
.etg-footer-logo-row {
justify-content: center;
gap: 10px;
text-align: center;
}
.etg-footer-logo {
width: 44px;
height: 44px;
border-radius: 12px;
}
.etg-footer-brand {
gap: 8px;
}
.etg-footer-brand strong {
font-size: 20px;
}
.etg-footer-brand span {
font-size: 10px;
letter-spacing: .08em;
}
.etg-footer-brand p {
display: none;
}
.etg-footer-col {
gap: 9px;
width: min(100%, 304px);
}
.etg-footer-col h3 {
color: rgba(234, 248, 255, .86) !important;
font-size: 12px;
letter-spacing: .03em;
margin: 0;
}
.etg-footer-services-details summary {
width: auto;
min-height: 36px;
font-size: 12px;
}
.etg-footer-links {
grid-template-columns: 1fr;
gap: 6px;
width: min(100%, 260px);
margin-top: 0;
}
.etg-footer-links a {
display: flex;
justify-content: center;
width: 100%;
min-height: 32px;
padding: 7px 8px;
border: 1px solid rgba(184, 170, 255, .13);
border-radius: 12px;
background: rgba(255,255,255,.045);
color: rgba(234, 248, 255, .76) !important;
font-size: 12px;
line-height: 1.15;
}
.etg-footer-contact {
grid-template-columns: 1fr;
gap: 8px;
width: 100%;
}
.etg-footer-contact a {
display: flex;
justify-content: center;
width: 100%;
min-height: 42px;
padding: 9px 12px;
border-radius: 14px;
background: rgba(255, 255, 255, .075);
border-color: rgba(184, 170, 255, .18);
color: #eaf8ff !important;
font-size: 13px;
line-height: 1.12;
overflow: hidden;
text-overflow: ellipsis;
}
.etg-footer-contact a:first-child {
min-height: 44px;
background: #4c5fd8;
border-color: rgba(120, 137, 255, .42);
color: #fff !important;
font-size: 14px;
}
.etg-footer-contact a[href^="tel:"] {
grid-column: auto;
}
.etg-footer-contact .icon {
width: 15px;
height: 15px;
min-width: 15px;
}
.etg-footer-bottom {
flex-direction: column;
align-items: center;
text-align: center;
gap: 4px;
margin-top: 2px;
padding-top: 12px;
font-size: 11px;
line-height: 1.25;
}
.etg-footer-bottom span:last-child {
display: none;
}
} @media (min-width:981px) and (max-width:1239px) {
.desktop-header {
--desktop-header-width:calc(100vw - 28px) !important;
}
.desktop-header__inner {
grid-template-columns:minmax(0, 1fr) 58px minmax(0, 1fr) !important;
gap:45px !important;
padding:8px 10px !important;
min-height:74px !important;
}
.desktop-header__nav {
justify-self:end !important;
gap:5px !important;
}
.desktop-brand {
justify-self:center !important;
width:58px !important;
height:58px !important;
}
.desktop-header__actions {
width:auto !important;
min-width:0 !important;
justify-self:start !important;
gap:5px !important;
justify-content:flex-start !important;
}
.desktop-header__nav a,
.desktop-services summary,
.desktop-header__price,
.desktop-header__cta {
min-height:40px !important;
padding-left:10px !important;
padding-right:10px !important;
font-size:13px !important;
gap:5px !important;
}
.desktop-header__price {
padding-left:11px !important;
padding-right:11px !important;
font-size:13px !important;
}
.desktop-social,
.language-switch--desktop {
width:36px !important;
min-width:36px !important;
height:36px !important;
min-height:36px !important;
}
.desktop-services summary::before {
width:15px !important;
flex-basis:15px !important;
}
.desktop-services summary::after {
width:6px !important;
height:6px !important;
}
.desktop-brand img {
width:54px !important;
height:54px !important;
}
.desktop-services__panel {
top:98px !important;
width:calc(100vw - 28px) !important;
}
} @media (max-width: 980px) {
.desktop-header {
display:none !important;
}
.topbar {
--topbar-icon-size:18px;
--topbar-service-icon-size:16px;
display:block !important;
opacity:1;
visibility:visible;
pointer-events:auto;
transform:none;
}
.topbar__inner {
width:100% !important;
max-width:none !important;
direction:ltr;
min-height:62px;
margin:0 auto;
grid-template-columns:40px minmax(0, 1fr) 40px !important;
gap:10px;
justify-content:normal;
}
.topbar .wrap {
color:inherit;
font-family:inherit;
isolation:auto;
position:relative;
background:none;
box-shadow:none;
border:0;
border-radius:0;
padding:0;
}
.topbar .icon {
width:21px;
height:21px;
min-width:21px;
margin:0;
}
.brand {
width:50px;
height:50px;
}
.brand__logo {
width:48px;
height:48px;
flex-basis:48px;
border-radius:14px;
}
.topbar .service-menu__button,
.topbar .menu-toggle {
width:40px;
height:40px;
display:grid;
place-items:center;
justify-content:center;
padding:0;
gap:0;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
line-height:0;
}
.topbar .service-menu__icon {
width:var(--topbar-service-icon-size);
height:12px;
flex-basis:var(--topbar-service-icon-size);
}
.topbar .page-nav-wrap {
width:40px;
display:grid;
place-items:center;
justify-self:end;
}
.topbar .nav {
position:fixed;
top:74px;
left:12px;
right:12px;
width:auto;
max-height:calc(100dvh - 96px);
overflow:auto;
z-index:2147482600;
}
.topbar .nav a {
min-height:44px;
justify-content:center;
background:rgba(86, 119, 214, .18);
border:1px solid rgba(255,255,255,.08);
}
.menu-toggle .icon--page-nav {
width:var(--topbar-icon-size);
height:var(--topbar-icon-size);
min-width:var(--topbar-icon-size);
}
.service-menu__button .service-menu__label {
display:none !important;
}
.service-menu__panel {
position:fixed;
top:74px;
left:12px;
right:12px;
width:auto;
max-height:calc(100dvh - 96px);
z-index:2147482600;
}
.mobile-cta {
display:grid;
}
}  .etg-footer-services-actions {
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
align-items:start;
gap:10px;
width:min(100%, 360px);
max-width:100%;
}
.etg-footer-services-actions > .etg-footer-services-details {
grid-column:1 / -1;
order:3;
min-width:0;
width:100%;
}
.etg-footer-contact-page,
.etg-footer-language summary.etg-footer-language-btn {
min-height:38px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
width:fit-content;
max-width:100%;
padding:9px 14px;
border:1px solid rgba(184,170,255,.18);
border-radius:999px;
background:rgba(255,255,255,.07);
color:#f0fbff !important;
font-size:14px;
font-weight:950;
line-height:1.15;
text-decoration:none !important;
white-space:nowrap;
}
.etg-footer-contact-page,
.etg-footer-language,
.etg-footer-language summary.etg-footer-language-btn,
.etg-footer-services-actions > .etg-footer-services-details > summary {
width:100%;
max-width:100%;
}
.etg-footer-contact-page {
border-color:rgba(104,225,255,.34);
background:rgba(104,225,255,.11);
order:1;
}
.etg-footer-language {
position:relative;
display:inline-grid;
place-items:center;
order:2;
}
.etg-footer-language summary.etg-footer-language-btn {
cursor:pointer;
list-style:none;
}
.etg-footer-language summary.etg-footer-language-btn::-webkit-details-marker {
display:none;
}
.etg-footer-language .language-switch__panel {
top:auto;
bottom:calc(100% + 8px);
left:50%;
transform:translateX(-50%);
z-index:30;
}
.etg-footer-contact-page:hover,
.etg-footer-contact-page:focus-visible,
.etg-footer-language summary.etg-footer-language-btn:hover,
.etg-footer-language summary.etg-footer-language-btn:focus-visible {
color:#fff !important;
border-color:rgba(104,225,255,.48);
outline:none;
text-shadow:0 0 14px rgba(33,230,255,.34);
}
@media (min-width:641px) and (max-width:980px) {
.etg-site-footer {
text-align:center;
}
.etg-footer-grid {
grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
justify-items:center;
align-items:start;
column-gap:clamp(22px, 5vw, 48px) !important;
row-gap:20px !important;
}
.etg-footer-brand {
grid-column:1 / -1;
width:min(100%, 720px);
justify-items:center;
text-align:center;
}
.etg-footer-logo-row {
justify-content:center;
}
.etg-footer-col {
width:min(100%, 360px);
justify-items:center;
text-align:center;
}
.etg-footer-contact {
width:min(100%, 300px);
justify-items:center;
}
.etg-footer-contact a {
width:100%;
justify-content:center;
}
.etg-footer-bottom {
display:grid;
grid-template-columns:1fr;
justify-items:center;
text-align:center;
gap:6px;
}
}
@media (max-width:980px) {
.etg-footer-grid {
grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) !important;
gap:18px !important;
}
.etg-footer-brand {
grid-column:1 / -1;
}
.etg-footer-services-actions {
grid-template-columns:repeat(2, minmax(0, 1fr));
width:min(100%, 360px);
}
.etg-footer-contact-page,
.etg-footer-language summary.etg-footer-language-btn,
.etg-footer-services-actions > .etg-footer-services-details > summary {
min-height:42px;
}
}
@media (max-width:425px) {
.etg-footer-grid {
grid-template-columns:minmax(0, 1fr) !important;
gap:14px !important;
text-align:center;
justify-items:center;
}
.etg-footer-contact-col {
order:2;
}
.etg-footer-services {
order:3;
}
.etg-footer-col {
width:min(100%, 304px);
}
.etg-footer-services-actions {
grid-template-columns:minmax(0, 1fr);
width:100%;
}
.etg-footer-contact-page,
.etg-footer-language,
.etg-footer-services-actions > .etg-footer-services-details {
grid-column:1;
}
} main {
text-align:center !important;
}
main :is(h1, h2, h3, h4, h5, h6, p, li, a, button, summary, label, figcaption) {
text-align:center !important;
}
main h1,
main h2,
main h3,
main h4 {
text-align:center !important;
}
main .section-kicker {
justify-content:center;
width:max-content;
max-width:100%;
margin-left:auto;
margin-right:auto;
text-align:center !important;
}
main .price {
display:grid;
justify-items:center;
align-content:center;
text-align:center !important;
}
main .price > *,
main .price__label,
main .price__value,
main .price p {
width:100%;
max-width:46rem;
margin-left:auto;
margin-right:auto;
text-align:center !important;
}
main .card__icon {
margin-left:auto;
margin-right:auto;
}
main :is(
.hero__content,
.section__head,
.section__head > div,
.story,
.media-copy,
article.card,
.include-column,
.process-step,
.process-step__title,
.semantic-link-copy,
.semantic-delivery__head,
.semantic-delivery-card,
.semantic-proof,
.geo-panel,
.fact,
.project-card__body,
.home-choice-card,
.contact-intent-card,
.pricing-choice-card,
.legal-card
) {
justify-items:center;
text-align:center !important;
}
main :is(
.hero__actions,
.cta-panel__actions,
.etg-contact-actions,
.pricing-hero__actions,
.portfolio-service-links,
.core-jump-nav,
.semantic-jump-nav
) {
justify-content:center !important;
align-items:center;
text-align:center !important;
width:100%;
margin-left:auto;
margin-right:auto;
}
main :is(
.btn,
.link-card,
.service-directory a,
.project-card__link,
.pricing-hero__button,
.etg-contact-btn,
.service-card,
.core-jump-nav a,
.semantic-jump-nav a,
.portfolio-service-links a
) {
justify-content:center !important;
align-items:center;
text-align:center !important;
}
.btn:has(> .icon) {
position:relative;
padding-inline:48px;
text-align:center !important;
}
.btn:has(> .icon) > .icon {
position:absolute;
inset-inline-start:18px;
top:50%;
margin:0;
transform:translateY(-50%);
}
main .link-card {
flex-direction:column;
justify-content:center !important;
justify-items:center;
text-align:center !important;
}
main .link-card > .icon {
margin-left:auto;
margin-right:auto;
}
main :is(.include-column h3, article.card h3, .section-kicker):has(> .icon) {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
gap:10px;
width:100%;
text-align:center !important;
}
main :is(
.section-kicker,
.process-step__head,
.process-step__title,
.semantic-link-copy,
.service-directory__summary-text,
.project-card__head
) {
justify-content:center;
justify-items:center;
align-items:center;
text-align:center !important;
}
main .process-step__head {
flex-direction:column;
gap:12px;
}
main :is(.card__icon, .process-step__icon) {
margin-left:auto !important;
margin-right:auto !important;
}
main :is(.include-column h3, article.card h3) {
justify-content:center;
width:100%;
text-align:center !important;
}
main :is(.include-column, article.card) :is(ul, ol) {
width:max-content;
max-width:100%;
margin-left:auto;
margin-right:auto;
}
main :is(.include-column, article.card) li {
width:100%;
padding-left:24px !important;
padding-right:24px !important;
text-align:center !important;
}
main :is(.include-column, article.card) li::before {
right:2px !important;
left:auto !important;
}
main .service-directory summary {
text-align:center !important;
}
main .service-directory__summary-text {
justify-items:center;
text-align:center !important;
}
main :is(.faq, .price-faq) :is(summary, p) {
text-align:center !important;
}
main :is(.home-choice-note, .contact-intent-note, .pricing-choice-note) {
text-align:center !important;
}
main .addon-row {
text-align:center !important;
}
main .addon-row > * {
justify-self:center;
text-align:center !important;
}
main :is(.addon-main, .addon-price, .included-pill) {
text-align:center !important;
}
.etg-site-footer {
text-align:center !important;
}
.etg-site-footer :is(h2, h3, p, a, summary, strong, span) {
text-align:center !important;
}
.etg-site-footer :is(
.etg-footer-logo-row,
.etg-footer-services-actions,
.etg-footer-contact,
.etg-footer-links,
.etg-footer-bottom
) {
justify-content:center;
justify-items:center;
align-items:center;
text-align:center !important;
}
.etg-site-footer :is(.etg-footer-brand, .etg-footer-col, .etg-footer-contact-col) {
justify-items:center;
text-align:center !important;
}  @media (min-width:641px) { main .intro-grid > *,
main .story,
main .media-copy,
main article.card,
main .project-card__body,
main .semantic-delivery-card,
main .semantic-proof,
main .geo-panel,
main .cta-panel,
main .fact {
text-align:center !important;
}
main .story > p,
main .media-copy > p,
main article > p,
main aside > p,
main .section-note,
main .semantic-link-note,
main .semantic-delivery__head p,
main .semantic-delivery-card p,
main .semantic-proof p,
main .fact p,
main figcaption,
main .image-frame__label {
margin-left:auto;
margin-right:auto;
text-align:center !important;
}
main .section__head,
main .section__head > div,
main .semantic-delivery__head {
justify-items:center;
text-align:center !important;
}
main .semantic-delivery__head {
display:grid;
grid-template-columns:1fr;
justify-content:center;
}
main .process-step__head {
justify-content:center;
align-items:center;
flex-direction:column;
gap:12px;
text-align:center !important;
}
main .process-step__title,
main .semantic-link-copy {
justify-items:center;
text-align:center !important;
}
main .include-column {
justify-items:center;
text-align:center !important;
}
main .include-column h3,
main article.card h3 {
justify-content:center;
width:100%;
text-align:center !important;
}
main .include-column ul,
main .include-column ol,
main article.card ul,
main article.card ol {
width:max-content;
max-width:100%;
margin-left:auto;
margin-right:auto;
justify-items:stretch;
}
main .include-column li,
main article.card li {
width:100%;
padding-left:24px !important;
padding-right:24px !important;
text-align:center !important;
}
main .include-column li::before,
main article.card li::before {
right:2px !important;
left:auto !important;
}
main .link-card,
main .btn,
main .cta-panel__actions,
main .hero__actions {
justify-content:center;
text-align:center !important;
}
main .faq summary {
text-align:center !important;
} .hero {
text-align:center;
}
.hero__content {
display:grid;
justify-items:center;
text-align:center;
}
.hero h1,
.hero .lead {
margin-left:auto;
margin-right:auto;
text-align:center;
}
.hero__actions,
.cta-panel__actions {
justify-content:center;
}
.hero__facts,
.fact {
text-align:center;
}
.section__head {
grid-template-columns:1fr !important;
justify-items:center;
text-align:center;
max-width:min(100%, 980px);
margin-left:auto;
margin-right:auto;
}
.section__head > div,
.section__head > div:first-child {
display:grid;
justify-items:center;
text-align:center;
}
.section-kicker {
justify-content:center;
margin-left:auto;
margin-right:auto;
}
.section-note {
max-width:min(100%, 820px);
margin-left:auto;
margin-right:auto;
text-align:center;
}
.geo-grid {
grid-template-columns:1fr !important;
justify-items:center;
}
.geo-panel {
display:grid;
justify-items:center;
width:100%;
text-align:center;
}
#geo .geo-panel h2 {
justify-self:center;
width:min(100%, 980px);
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
#geo .geo-panel p {
justify-self:center;
max-width:min(100%, 860px);
margin-left:auto !important;
margin-right:auto !important;
text-align:center !important;
}
.geo-grid > .image-frame {
width:min(100%, 860px);
}
.cta-panel {
grid-template-columns:1fr !important;
justify-items:center;
text-align:center;
}
.cta-panel > div:first-child,
.cta-panel h2,
.cta-panel p {
text-align:center;
}
}.service-menu__panel a.service-menu__portfolio {
min-height: 42px;
margin-bottom: 8px;
border: 1px solid rgba(104, 225, 255, .88);
border-radius: 12px;
color: #e9fdff;
background: rgba(24, 199, 216, .14);
box-shadow:
inset 0 0 0 1px rgba(104, 225, 255, .18),
0 10px 24px rgba(24, 199, 216, .14);
}
.service-menu__panel a.service-menu__portfolio:hover,
.service-menu__panel a.service-menu__portfolio:focus-visible {
color: #ffffff;
border-color: rgba(151, 241, 255, .98);
background: rgba(24, 199, 216, .24);
box-shadow:
inset 0 0 0 1px rgba(151, 241, 255, .24),
0 12px 30px rgba(24, 199, 216, .22);
}
.service-menu__panel a.service-menu__portfolio.is-current {
color: #ffffff;
border-color: rgba(151, 241, 255, .98);
background: rgba(24, 199, 216, .24);
box-shadow:
inset 0 0 0 1px rgba(151, 241, 255, .24),
0 12px 30px rgba(24, 199, 216, .22);
} .service-menu__panel a.service-menu__contact {
min-height:42px;
margin-bottom:8px;
border:1px solid rgba(43, 96, 235, .98);
border-radius:12px;
color:#eef4ff !important;
background:rgba(18, 45, 122, .38);
box-shadow:
inset 0 0 0 1px rgba(112, 153, 255, .2),
0 10px 24px rgba(13, 42, 122, .26);
}
.service-menu__panel a.service-menu__contact:hover,
.service-menu__panel a.service-menu__contact:focus-visible,
.service-menu__panel a.service-menu__contact.is-current {
color:#ffffff !important;
border-color:rgba(88, 137, 255, 1);
background:rgba(24, 64, 164, .54);
box-shadow:
inset 0 0 0 1px rgba(151, 181, 255, .24),
0 12px 30px rgba(15, 52, 151, .34);
}
.desktop-header__contact {
min-width:88px;
color:#ffffff !important;
border-color:rgba(202, 180, 255, .72) !important;
background:linear-gradient(135deg, #7651d5, #238fd8) !important;
box-shadow:
0 0 28px rgba(117, 81, 213, .32),
inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.desktop-header__contact:hover,
.desktop-header__contact:focus-visible,
.desktop-header__contact.is-current {
color:#ffffff !important;
border-color:rgba(226, 213, 255, .96) !important;
background:linear-gradient(135deg, #865ee7, #1aa6dc) !important;
box-shadow:
0 0 36px rgba(117, 81, 213, .4),
0 12px 28px rgba(0,0,0,.2),
inset 0 1px 0 rgba(255,255,255,.24) !important;
}
.desktop-header__contact.is-current {
pointer-events:none;
}
@media (min-width:981px) and (max-width:1120px) {
.desktop-header__contact {
min-width:0;
padding-left:9px !important;
padding-right:9px !important;
}
}  .desktop-language-mark {
min-width:30px;
display:inline-flex;
align-items:center;
justify-content:center;
color:#ffffff;
font-family:var(--font-display);
font-size:13px;
font-weight:900;
line-height:1;
letter-spacing:0;
white-space:nowrap;
}
@media (min-width:981px) {
.desktop-header {
--desktop-header-width:min(1180px, calc(100vw - 44px));
}
.desktop-header__left {
position:relative;
z-index:1;
width:100%;
min-width:0;
display:flex;
align-items:center;
justify-content:flex-end;
gap:8px;
direction:ltr;
}
.desktop-header__left > .desktop-header__nav {
margin-left:0;
}
.desktop-header__left > .desktop-social--facebook {
order:-1 !important;
flex:0 0 auto;
}
.desktop-header__actions {
justify-content:flex-end;
gap:8px;
}
.desktop-header__actions > .language-switch--desktop {
order:1 !important;
}
.desktop-header__actions > .desktop-header__contact {
order:2 !important;
}
.desktop-header__actions > .desktop-header__price {
order:3 !important;
}
.desktop-header__actions > .desktop-services {
order:4 !important;
margin-left:0 !important;
}
}.etg-footer-contact a.etg-footer-portfolio-page {
border-color: rgba(104, 225, 255, .5);
color: #e9fdff !important;
background: rgba(24, 199, 216, .14);
box-shadow:
inset 0 0 0 1px rgba(104, 225, 255, .12),
0 8px 22px rgba(24, 199, 216, .1);
}
.etg-footer-contact a.etg-footer-portfolio-page:hover,
.etg-footer-contact a.etg-footer-portfolio-page:focus-visible,
.etg-footer-contact a.etg-footer-portfolio-page.is-current {
border-color: rgba(151, 241, 255, .92);
color: #ffffff !important;
background: rgba(24, 199, 216, .24);
box-shadow:
inset 0 0 0 1px rgba(151, 241, 255, .2),
0 10px 26px rgba(24, 199, 216, .18);
}
@media (max-width: 640px) {
.etg-footer-services,
.etg-footer-services-actions,
.etg-footer-services-details,
.etg-footer-services-details[open],
.etg-footer-links {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
justify-self: stretch;
}
.etg-footer-services-details > summary {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
}
.etg-footer-links {
grid-template-columns: minmax(0, 1fr);
justify-items: stretch;
gap: 6px;
margin: 0;
padding: 8px 0 0;
overflow: hidden;
}
.etg-footer-links a {
width: 100%;
min-width: 0;
max-width: 100%;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
text-align: center;
}
}