:root{
--blue:#2553E8;
--blue-2:#214BFF;
--violet:#7C3AED;
--navy:#0F172A;
--text:#1E293B;
--muted:#64748B;
--border:#E2E8F0;
--bg:#F8FAFC;
--white:#fff;
--shadow-card:0 16px 34px rgba(15,23,42,.07);
--shadow-soft:0 18px 48px rgba(37,83,232,.12);
--gradient-primary:linear-gradient(135deg,#214BFF 0%,#4F46E5 100%);
--gradient-violet:linear-gradient(135deg,#284DFF 0%,#8B5CF6 100%);
--font:Inter,Arial,"Helvetica Neue",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}img{max-width:100%;display:block}button,input{font:inherit}.container{width:min(1110px,calc(100% - 64px));margin-inline:auto}.section-pad{padding:70px 0}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--navy);letter-spacing:-.035em}h2{font-size:34px;line-height:1.12;text-align:center;font-weight:800}.site-header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);border-bottom:1px solid var(--border);backdrop-filter:blur(16px)}.header__inner{height:74px;display:flex;align-items:center;gap:28px}.brand{display:flex;align-items:center;flex:0 0 auto}.brand__logo--desktop{width:180px;height:auto}.brand__mobile{display:none;align-items:center;gap:10px;font-weight:900;font-size:27px;letter-spacing:-.06em;color:var(--blue-2)}.brand__mobile img{width:35px;height:35px}.main-nav{display:flex;align-items:center;justify-content:center;gap:34px;flex:1;font-weight:800;font-size:13px;line-height:1;color:#0d1830;text-transform:uppercase}.main-nav a{opacity:.94}.main-nav a:hover{color:var(--blue)}.header__cta{height:44px;padding:0 22px;border-radius:9px;background:var(--gradient-primary);color:#fff;font-weight:800;font-size:13px;display:inline-flex;align-items:center;box-shadow:0 12px 26px rgba(37,83,232,.18)}.burger{display:none;margin-left:auto;background:transparent;border:0;width:44px;height:44px;align-items:center;justify-content:center;flex-direction:column;gap:5px}.burger span{display:block;width:24px;height:2px;background:var(--navy);border-radius:9px}.mobile-menu{display:none}.hero{position:relative;overflow:hidden;padding:82px 0 74px;background:linear-gradient(180deg,#f8fbff 0%,#ffffff 58%,#fbfdff 100%);border-bottom:1px solid #edf2f7}.hero::before{content:"";position:absolute;inset:0;background:url("../png/hero/hero_background.webp") center/cover no-repeat;opacity:.95;pointer-events:none}.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,246,255,.72) 0%,rgba(235,243,255,.58) 24%,rgba(244,248,255,.34) 48%,rgba(255,255,255,.08) 72%,rgba(255,255,255,0) 100%);pointer-events:none}.hero .container,.hero__grid,.hero__content,.hero__visual,.service-list{position:relative;z-index:1}.hero__grid{display:grid;grid-template-columns:1fr minmax(420px,560px) 220px;align-items:center;column-gap:26px}.hero__content{padding-top:8px;max-width:640px}.hero h1{font-size:58px;line-height:1.08;font-weight:900}.hero h1 span{color:var(--blue-2)}.hero__content::before{content:"";position:absolute;inset:-22px -28px -20px -22px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,.12) 100%);backdrop-filter:blur(4px);box-shadow:0 14px 36px rgba(30,72,180,.08);z-index:-1}.lead{margin-top:26px;max-width:500px;font-size:20px;line-height:1.54;color:#52627a}.hero__actions{display:flex;align-items:center;gap:14px;margin-top:34px;flex-wrap:wrap}.btn{min-height:52px;padding:0 26px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;gap:15px;font-weight:800;font-size:14px;white-space:nowrap;border:1.5px solid transparent}.btn--primary{background:var(--gradient-primary);color:#fff;box-shadow:0 15px 35px rgba(37,83,232,.22)}.btn--secondary{background:#fff;color:var(--blue-2);border-color:var(--blue)}.btn--small{min-height:46px;padding:0 22px}.hero__visual{position:relative;min-height:470px;display:grid;place-items:center;justify-items:end}.hero-stack{width:min(100%,720px);filter:drop-shadow(0 28px 50px rgba(37,83,232,.18))}.service-list{list-style:none;margin:0;padding:0;display:grid;gap:28px}.service-list li{display:grid;grid-template-columns:55px 1fr;align-items:center;gap:16px}.service-list span{width:54px;height:54px;border-radius:50%;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);box-shadow:var(--shadow-card);display:grid;place-items:center}.service-list img{width:29px;height:29px}.service-list b{font-size:14px;line-height:1.35;color:#18233b;text-shadow:0 1px 0 rgba(255,255,255,.4)}.solutions{background:#fff;padding-top:62px}.cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:42px}.solution-card{min-height:242px;border:1px solid var(--border);background:#fff;border-radius:14px;padding:26px 24px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;align-items:flex-start}.iconbox{width:55px;height:55px;border-radius:11px;background:#EEF2FF;display:grid;place-items:center;margin-bottom:22px}.iconbox img{width:32px;height:32px}.solution-card h3{font-size:20px;line-height:1.2;font-weight:850;margin-bottom:14px}.solution-card p{font-size:15px;line-height:1.55;color:#53637b}.solution-card a{margin-top:auto;padding-top:18px;font-weight:850;font-size:15px;color:var(--blue-2)}.platform{padding-top:10px}.platform__box{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(135deg,#f8fbff 0%,#fff 43%,#eff4ff 100%);box-shadow:var(--shadow-soft);display:grid;grid-template-columns:1.05fr .9fr 260px;align-items:center;min-height:340px;padding:46px 44px;border:1px solid #eef2f7}.platform__text h2{text-align:left;font-size:32px;line-height:1.12}.platform__text p{margin-top:18px;max-width:520px;color:#54647c}.check-list{list-style:none;padding:0;margin:24px 0 0;display:grid;gap:12px}.check-list li{position:relative;padding-left:30px;color:#35445c;font-weight:600}.check-list li::before{content:"✓";position:absolute;left:0;top:0;width:18px;height:18px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:900}.platform__visual{display:grid;place-items:center}.platform__visual img{width:min(100%,380px)}.platform__labels{list-style:none;margin:0;padding:0;display:grid;gap:27px;font-weight:800;color:#15233b;font-size:14px}.platform__labels li{position:relative;padding-left:42px}.platform__labels li::before{content:"";position:absolute;left:0;top:10px;width:30px;border-top:2px dotted #2f5fff}.process{padding-top:48px}.process .container{position:relative}.process-line{position:absolute;left:calc((100% - min(1110px, calc(100% - 64px))) / 2 + 84px);right:calc((100% - min(1110px, calc(100% - 64px))) / 2 + 84px);top:169px;border-top:2px dotted #b9c8ff;z-index:0}.process-grid{list-style:none;padding:0;margin:48px 0 0;display:grid;grid-template-columns:repeat(5,1fr);gap:26px;position:relative;z-index:1}.process-grid li{text-align:center}.step-num{display:grid;place-items:center;width:35px;height:35px;border-radius:50%;background:var(--blue);color:#fff;margin:0 auto 28px;font-weight:900;box-shadow:0 8px 20px rgba(37,83,232,.2)}.process-grid img{width:38px;height:38px;margin:0 auto 17px}.process-grid h3{font-size:16px;font-weight:850;margin-bottom:10px}.process-grid p{font-size:14px;line-height:1.5;color:#52627a}.trust{padding:58px 0 0;background:#fff}.trust__box{border-radius:0;overflow:hidden;background:#061B54 url("../svg/backgrounds/trust_mesh_background.svg") center/cover no-repeat;color:#fff;min-height:312px;padding:34px 72px 40px}.trust h2{text-align:center;color:#fff;font-size:34px;margin-bottom:34px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}.metrics div{display:grid;grid-template-columns:46px auto;column-gap:19px;align-items:center;position:relative}.metrics div:not(:last-child)::after{content:"";position:absolute;right:-14px;top:16px;height:64px;width:1px;background:rgba(255,255,255,.25)}.metrics img{width:40px;height:40px;grid-row:1 / span 2;filter:brightness(0) invert(1)}.metrics strong{font-size:38px;line-height:1;font-weight:900;letter-spacing:-.04em}.metrics span{font-size:14px;line-height:1.2;color:rgba(255,255,255,.86)}.clients-title{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:32px;margin:42px 0 34px;color:#fff}.clients-title span{display:block;height:1px;background:rgba(255,255,255,.22)}.client-logos{display:grid;grid-template-columns:repeat(6,1fr);align-items:center;gap:26px;text-align:center}.client-logos b{font-size:23px;letter-spacing:-.04em;color:#fff}.finmodel{padding-top:58px}.finmodel__box{min-height:322px;border-radius:16px;overflow:hidden;background:linear-gradient(135deg,#f7faff 0%,#fff 45%,#eef4ff 100%);display:grid;grid-template-columns:.86fr 1.1fr;align-items:center;border:1px solid #eef2f7;box-shadow:var(--shadow-soft)}.finmodel__text{padding:46px 34px 46px 38px}.eyebrow{display:block;color:var(--blue-2);font-weight:900;margin-bottom:14px}.finmodel h2{text-align:left;font-size:36px;line-height:1.08}.finmodel p{margin-top:18px;color:#53647d;max-width:460px}.finmodel__visual{min-height:300px;display:grid;align-items:end;overflow:hidden}.finmodel__visual img{width:100%;max-width:650px;transform:translateY(18px)}.cta-section{padding-top:20px}.cta__box{position:relative;overflow:hidden;border-radius:18px;background:linear-gradient(120deg,#f8fbff 0%,#eaf0ff 50%,#884cff 100%);min-height:142px;padding:34px 42px;display:grid;grid-template-columns:1fr auto 210px;align-items:center;gap:34px}.cta__box h2{text-align:left;font-size:32px}.cta__box p{margin-top:8px;color:#46566e}.cta-chat{position:absolute;right:24px;bottom:-48px;width:220px;opacity:.95;pointer-events:none}.cta__box .btn{position:relative;z-index:2}.footer{padding:46px 0 36px;background:#fff}.footer__grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr) 1.18fr;gap:42px}.footer h3{font-size:15px;margin-bottom:18px}.footer a,.footer p{display:block;color:#58687f;font-size:14px;line-height:1.6}.footer nav a{margin-bottom:10px}.footer__brand img{width:178px}.footer__brand p{margin:18px 0 22px;max-width:250px}.socials{display:flex;gap:14px}.socials a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#f1f5f9;color:#0f1c32;font-weight:800}.footer__contacts .btn{margin-top:24px}.footer__bottom{display:flex;justify-content:space-between;gap:22px;align-items:center;margin-top:52px;color:#66768b;font-size:13px}.footer__bottom a{font-size:13px;color:#66768b}@media (max-width:1180px){.container{width:min(100% - 44px,980px)}.main-nav{gap:20px;font-size:12px}.hero__grid{grid-template-columns:.9fr minmax(360px,470px);grid-template-areas:"text visual" "services services";row-gap:32px}.hero__content{grid-area:text}.hero__visual{grid-area:visual}.service-list{grid-area:services;grid-template-columns:repeat(4,1fr);gap:14px}.service-list li{grid-template-columns:46px 1fr}.platform__box{grid-template-columns:1fr .9fr;padding:38px}.platform__labels{grid-column:1/-1;grid-template-columns:repeat(4,1fr);gap:18px}.cards-grid{gap:16px}.trust__box{padding-inline:38px}.client-logos b{font-size:19px}}@media (max-width:900px){.header__inner{height:70px}.brand__logo--desktop{display:none}.brand__mobile{display:flex}.main-nav{display:none}.header__cta{margin-left:auto}.burger{display:flex}.mobile-menu{position:absolute;left:0;right:0;top:70px;background:#fff;border-bottom:1px solid var(--border);padding:18px 28px 24px;box-shadow:0 22px 34px rgba(15,23,42,.08);grid-template-columns:1fr 1fr;gap:15px 28px;font-weight:800}.mobile-menu.is-open{display:grid}.container{width:min(100% - 38px,760px)}.section-pad{padding:54px 0}.hero{padding-top:38px}.hero__grid{display:grid;grid-template-columns:1fr .95fr;grid-template-areas:"text visual" "services services";align-items:center;column-gap:10px}.hero h1{font-size:45px}.lead{font-size:18px;margin-top:18px}.hero__actions{margin-top:26px}.hero__visual{min-height:330px}.service-list{grid-template-columns:repeat(4,1fr)}.service-list li{grid-template-columns:1fr;text-align:center;gap:10px;justify-items:center}.cards-grid{grid-template-columns:repeat(4,1fr);gap:12px}.solution-card{padding:20px 16px;min-height:250px}.solution-card h3{font-size:17px}.solution-card p{font-size:13px}.platform__box{grid-template-columns:1fr;gap:22px}.platform__text h2,.finmodel h2{font-size:31px}.platform__visual img{max-width:380px}.platform__labels{grid-template-columns:repeat(2,1fr)}.process-line{display:none}.process-grid{gap:16px}.process-grid p{font-size:13px}.trust__box{border-radius:18px;padding:32px 28px}.metrics{grid-template-columns:repeat(4,1fr);gap:15px}.metrics div{grid-template-columns:1fr;justify-items:center;text-align:center;gap:6px}.metrics div:not(:last-child)::after{display:none}.metrics img{grid-row:auto;width:34px;height:34px}.metrics strong{font-size:30px}.metrics span{font-size:12px}.client-logos{grid-template-columns:repeat(3,1fr)}.finmodel__box{grid-template-columns:1fr}.finmodel__visual{min-height:230px}.finmodel__visual img{max-width:620px;margin-inline:auto}.cta__box{grid-template-columns:1fr auto;padding-right:210px}.footer__grid{grid-template-columns:1.5fr repeat(2,1fr);row-gap:34px}.footer__bottom{flex-wrap:wrap}}@media (max-width:640px){.container{width:min(100% - 28px,430px)}.header__cta{height:41px;padding-inline:16px;font-size:12px}.brand__mobile span{font-size:26px}.hero{padding-top:24px}.hero__grid{display:flex;flex-direction:column;align-items:stretch}.hero h1{font-size:42px}.lead{font-size:17px}.hero__actions{display:grid;grid-template-columns:1fr;gap:12px}.btn{width:100%;min-height:54px}.hero__visual{min-height:auto;order:2}.hero-stack{width:100%;max-width:410px;margin:0 auto}.service-list{order:3;grid-template-columns:repeat(2,1fr);gap:14px}.service-list li{display:flex;text-align:left;justify-content:flex-start}.service-list span{width:48px;height:48px}.service-list b{font-size:12px}.solutions{padding-top:38px}.solutions h2,.process h2,.trust h2{font-size:26px}.cards-grid{grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.solution-card{min-height:252px;padding:18px 14px}.iconbox{width:48px;height:48px;margin-bottom:16px}.solution-card h3{font-size:17px}.solution-card p{font-size:13px}.platform__box{padding:28px 20px}.platform__text h2{font-size:25px}.platform__labels{grid-template-columns:1fr}.process-grid{grid-template-columns:repeat(5,1fr);gap:8px;margin-top:30px}.step-num{width:29px;height:29px;margin-bottom:18px}.process-grid img{width:30px;height:30px}.process-grid h3{font-size:12px}.process-grid p{display:none}.trust{padding-top:18px}.trust__box{padding:24px 18px 28px;border-radius:18px}.metrics{grid-template-columns:repeat(4,1fr);gap:10px}.metrics img{width:28px;height:28px}.metrics strong{font-size:25px}.metrics span{font-size:10px}.client-logos{grid-template-columns:repeat(3,1fr);gap:16px}.client-logos b{font-size:15px}.finmodel__text{padding:30px 20px 20px}.finmodel h2{font-size:28px}.finmodel__visual{min-height:180px}.cta__box{grid-template-columns:1fr;padding:28px 22px 130px;gap:20px}.cta__box h2{font-size:27px}.cta-chat{right:0;bottom:-56px;width:190px}.footer__grid{grid-template-columns:1fr 1fr;gap:30px}.footer__brand{grid-column:1/-1}.footer__contacts{grid-column:1/-1}.footer__bottom{display:grid;gap:12px;margin-top:32px}}@media (max-width:420px){.container{width:min(100% - 24px,390px)}.header__inner{height:66px}.mobile-menu{top:66px;grid-template-columns:1fr}.brand__mobile img{width:31px;height:31px}.brand__mobile span{font-size:24px}.header__cta{display:none}.hero h1{font-size:36px}.lead{font-size:16px}.service-list{grid-template-columns:1fr 1fr}.cards-grid{grid-template-columns:1fr 1fr}.solution-card{padding:16px 12px;min-height:250px}.solution-card p{font-size:12px}.platform__text h2{font-size:23px}.check-list li{font-size:14px}.process-grid{grid-template-columns:repeat(5,1fr)}.metrics{grid-template-columns:repeat(2,1fr);row-gap:18px}.client-logos{grid-template-columns:repeat(2,1fr)}.footer__grid{grid-template-columns:1fr}}
/* ORIGINAL VIDEO LOGO — copied from the uploaded business-evolution site behavior. */
.brand-home-link{
display:inline-flex;
align-items:center;
flex:0 0 auto;
}
.brand{
display:flex;
align-items:center;
gap:12px;
flex:0 0 auto;
}
.brand-video{
margin-top:5px;
width:280px;
height:auto;
object-fit:contain;
display:block;
max-width:100%;
transition:width .3s ease, transform .2s ease;
cursor:pointer;
}
.brand-video:hover{transform:scale(1.02)}
.footer__brand .brand-video{width:300px;height:auto}
video::-webkit-media-controls-fullscreen-button{display:none}
video::-webkit-media-controls-play-button{display:none}
@media (max-width:1180px){.brand-video{width:230px}.footer__brand .brand-video{width:240px}}
@media (max-width:900px){.brand-video{width:190px}.footer__brand .brand-video{width:210px}}
@media (max-width:420px){.brand-video{width:165px}.footer__brand .brand-video{width:185px}}
/* Original video logo from business-evolution.zip */
.brand-video{display:block;width:280px;max-width:100%;height:auto;object-fit:contain;cursor:pointer;transition:transform .2s ease,width .3s ease}
.brand-video:hover{transform:scale(1.02)}
.footer__brand .brand-video{width:300px;height:auto}
@media (max-width:1180px){.brand-video{width:230px}.footer__brand .brand-video{width:240px}}
@media (max-width:900px){.brand-video{width:190px}.footer__brand .brand-video{width:210px}}
@media (max-width:420px){.brand-video{width:165px}.footer__brand .brand-video{width:185px}}
/* FULL-WIDTH SECTION BACKGROUNDS */
.platform{
background:linear-gradient(135deg,#f8fbff 0%,#ffffff 43%,#eff4ff 100%);
}
.platform__box{
background:transparent;
box-shadow:none;
border:0;
border-radius:0;
min-height:auto;
}
.trust{
padding:58px 0 0;
background:#061B54 url("../svg/backgrounds/trust_mesh_background.svg") center/cover no-repeat;
}
.trust__box{
background:transparent;
border-radius:0;
box-shadow:none;
min-height:auto;
padding:34px 0 40px;
}
.finmodel{
background:linear-gradient(135deg,#f7faff 0%,#ffffff 45%,#eef4ff 100%);
}
.finmodel__box{
background:transparent;
border:0;
box-shadow:none;
border-radius:0;
min-height:auto;
}
.cta-section{
background:linear-gradient(120deg,#f8fbff 0%,#eaf0ff 50%,#884cff 100%);
}
.cta__box{
background:transparent;
border-radius:0;
min-height:auto;
}
@media (max-width:900px){
.trust__box{padding:32px 0 36px}
}
@media (max-width:640px){
.trust__box{padding:24px 0 28px}
.cta__box{padding:28px 0 130px}
}
@media (max-width:900px){.hero::after{background:linear-gradient(180deg,rgba(241,247,255,.62) 0%,rgba(246,250,255,.38) 48%,rgba(255,255,255,.14) 100%)}.hero__visual{min-height:360px;justify-items:center}.hero-stack{max-width:520px}.hero__content::before{inset:-18px -18px -16px -18px}}
@media (max-width:640px){.hero::before{background-position:72% center}.hero::after{background:linear-gradient(180deg,rgba(243,248,255,.74) 0%,rgba(247,250,255,.46) 45%,rgba(255,255,255,.16) 100%)}.hero__visual{min-height:auto}.hero-stack{max-width:420px}.service-list span{background:rgba(255,255,255,.94)}.hero__content::before{inset:-14px -12px -12px -12px;border-radius:22px}}
/* =========================================================
DESIGN FIX v3 — stronger corporate desktop layout
Scope:
- stronger hero without white card feel
- better header scale
- stronger process block
- improved section readability
- full-width backgrounds preserved
========================================================= */
/* Header: make brand/nav/CTA feel intentional, not tiny */
.site-header{
background:rgba(255,255,255,.96);
box-shadow:0 8px 26px rgba(15,23,42,.04);
}
.header__inner{
height:84px;
gap:30px;
}
.main-nav{
gap:28px;
font-size:13.5px;
letter-spacing:.01em;
}
.header__cta{
min-width:150px;
height:48px;
justify-content:center;
border-radius:12px;
box-shadow:0 14px 28px rgba(37,83,232,.22);
}
/* Hero: remove the “small white card” impression and build one wide scene */
.hero{
padding:96px 0 84px;
min-height:680px;
background:
radial-gradient(circle at 11% 24%, rgba(37,83,232,.16) 0, rgba(37,83,232,.08) 26%, transparent 50%),
radial-gradient(circle at 46% 50%, rgba(124,58,237,.12) 0, rgba(124,58,237,.06) 32%, transparent 58%),
linear-gradient(115deg, #edf5ff 0%, #f4f8ff 34%, #ffffff 63%, #eef4ff 100%);
}
.hero::before{
opacity:.78;
background:
linear-gradient(90deg, rgba(238,246,255,.18) 0%, rgba(255,255,255,.05) 44%, rgba(255,255,255,0) 70%),
url("../png/hero/hero_background.webp") center/cover no-repeat;
}
.hero::after{
background:
linear-gradient(90deg, rgba(238,246,255,.42) 0%, rgba(244,249,255,.28) 28%, rgba(255,255,255,.08) 54%, rgba(255,255,255,0) 100%);
}
.hero__grid{
grid-template-columns:minmax(430px, 1.12fr) minmax(470px, .98fr) 250px;
column-gap:18px;
}
.hero__content{
position:relative;
max-width:690px;
padding-top:12px;
}
.hero__content::before{
display:none !important;
}
.hero h1{
font-size:66px;
line-height:1.04;
font-weight:950;
letter-spacing:-.055em;
text-wrap:balance;
}
.lead{
max-width:560px;
margin-top:28px;
font-size:22px;
line-height:1.55;
color:#41516a;
}
.hero__actions{
margin-top:36px;
gap:16px;
}
.btn{
min-height:56px;
border-radius:12px;
padding-inline:30px;
font-size:15px;
}
.hero__visual{
min-height:500px;
justify-items:center;
transform:translateX(-18px);
}
.hero-stack{
width:min(112%, 760px);
max-width:none;
filter:drop-shadow(0 34px 60px rgba(37,83,232,.22));
}
.service-list{
gap:22px;
}
.service-list li{
grid-template-columns:58px 1fr;
gap:15px;
}
.service-list span{
width:58px;
height:58px;
background:rgba(255,255,255,.82);
border:1px solid rgba(226,232,240,.86);
box-shadow:0 18px 38px rgba(37,83,232,.12);
}
.service-list b{
font-size:15px;
line-height:1.34;
color:#16213a;
}
/* Cards: more readable and less cramped */
.solutions{
padding-top:74px;
}
.solutions h2,
.process h2,
.trust h2{
font-size:38px;
}
.cards-grid{
gap:28px;
margin-top:46px;
}
.solution-card{
min-height:270px;
padding:30px 26px;
border-radius:18px;
}
.solution-card h3{
font-size:21px;
}
.solution-card p{
font-size:15.5px;
line-height:1.62;
}
/* Platform: full width background, content still centered */
.platform{
padding:72px 0;
background:
radial-gradient(circle at 74% 40%, rgba(37,83,232,.10) 0, transparent 42%),
linear-gradient(135deg,#f3f8ff 0%,#ffffff 42%,#eef4ff 100%);
}
.platform__box{
padding:0;
grid-template-columns:1.05fr .85fr 280px;
gap:28px;
}
.platform__text h2{
font-size:40px;
}
.platform__text p{
font-size:17px;
line-height:1.65;
}
.check-list li{
font-size:16px;
}
/* Process: make it a real sales block, not a tiny scheme */
.process{
padding-top:74px;
padding-bottom:80px;
background:#fff;
}
.process-line{
top:190px;
border-top:2px solid rgba(37,83,232,.18);
}
.process-grid{
gap:18px;
margin-top:54px;
}
.process-grid li{
background:#fff;
border:1px solid #E2E8F0;
border-radius:18px;
padding:24px 18px 26px;
box-shadow:0 14px 34px rgba(15,23,42,.055);
}
.step-num{
width:40px;
height:40px;
margin-bottom:22px;
}
.process-grid img{
width:44px;
height:44px;
}
.process-grid h3{
font-size:17px;
}
.process-grid p{
font-size:14.5px;
line-height:1.58;
color:#4f6078;
}
/* Trust: preserve full-width band and improve density */
.trust{
padding:0;
background:#061B54 url("../svg/backgrounds/trust_mesh_background.svg") center/cover no-repeat;
}
.trust__box{
padding:50px 0 54px;
}
.metrics strong{
font-size:42px;
}
.metrics span{
font-size:14.5px;
}
.client-logos b{
font-size:22px;
}
/* FinModel: stronger section, bigger type, less tiny dashboard feel */
.finmodel{
padding:74px 0;
background:
radial-gradient(circle at 80% 34%, rgba(37,83,232,.10) 0, transparent 40%),
linear-gradient(135deg,#f7faff 0%,#ffffff 45%,#eef4ff 100%);
}
.finmodel__box{
min-height:370px;
grid-template-columns:.9fr 1.1fr;
}
.finmodel h2{
font-size:42px;
}
.finmodel p{
font-size:17px;
line-height:1.62;
}
.finmodel__visual{
min-height:340px;
}
/* CTA: stronger commercial close */
.cta-section{
padding:0;
background:linear-gradient(120deg,#eaf2ff 0%,#edf3ff 44%,#8147f6 100%);
}
.cta__box{
min-height:178px;
padding:44px 0;
}
.cta__box h2{
font-size:38px;
}
.cta__box p{
font-size:17px;
}
/* Footer: readable corporate footer */
.footer{
padding:58px 0 40px;
}
.footer__grid{
gap:48px;
}
.footer h3{
font-size:16px;
}
.footer a,
.footer p{
font-size:15px;
}
.footer__bottom{
font-size:14px;
}
/* Tablet */
@media (max-width:1180px){
.header__inner{height:78px}
.hero{
min-height:auto;
padding:76px 0 70px;
}
.hero__grid{
grid-template-columns:minmax(360px, .95fr) minmax(380px, 1fr);
grid-template-areas:"text visual" "services services";
row-gap:32px;
}
.hero h1{font-size:56px}
.lead{font-size:20px}
.hero__visual{
transform:none;
min-height:420px;
}
.hero-stack{
width:min(110%, 640px);
}
.service-list{
grid-template-columns:repeat(4,1fr);
}
.platform__box{
grid-template-columns:1fr .86fr;
}
.platform__labels{
grid-column:1/-1;
grid-template-columns:repeat(4,1fr);
}
}
/* Mobile/tablet hero readability */
@media (max-width:900px){
.hero{
padding:52px 0 56px;
background:
radial-gradient(circle at 25% 12%, rgba(37,83,232,.13) 0, transparent 48%),
linear-gradient(180deg,#edf5ff 0%,#f7fbff 54%,#ffffff 100%);
}
.hero::before{
opacity:.55;
background-position:70% center;
}
.hero::after{
background:linear-gradient(180deg,rgba(240,247,255,.70) 0%,rgba(248,251,255,.42) 48%,rgba(255,255,255,.10) 100%);
}
.hero h1{
font-size:48px;
}
.hero__visual{
min-height:360px;
justify-items:center;
}
.hero-stack{
width:100%;
max-width:560px;
}
.process-grid li{
padding:20px 12px 22px;
}
}
/* Mobile */
@media (max-width:640px){
.header__inner{
height:70px;
}
.hero{
padding:34px 0 44px;
}
.hero h1{
font-size:42px;
line-height:1.08;
}
.lead{
font-size:17px;
}
.hero__visual{
margin-top:10px;
}
.hero-stack{
max-width:430px;
}
.service-list{
margin-top:8px;
}
.solutions h2,
.process h2,
.trust h2{
font-size:28px;
}
.cards-grid{
grid-template-columns:1fr;
}
.solution-card{
min-height:auto;
padding:24px 20px;
}
.process-grid{
grid-template-columns:1fr;
}
.process-grid p{
display:block;
}
.metrics{
grid-template-columns:repeat(2,1fr);
}
.finmodel h2,
.cta__box h2{
font-size:30px;
}
.cta__box{
padding:34px 0 132px;
}
}
/* Small mobile */
@media (max-width:420px){
.hero h1{
font-size:37px;
}
.service-list{
grid-template-columns:1fr;
}
.cards-grid{
grid-template-columns:1fr;
}
}
/* =========================================================
REAL DESIGN REBUILD — implements the actual analysis:
- hero as one wide scene, not a small card
- H1 stays in 3 lines by widening text column
- hero visual becomes dominant
- service items become horizontal glass chips inside hero
- process becomes a strong sales block
========================================================= */
:root{
--hero-blue-glow: rgba(37,83,232,.18);
--hero-violet-glow: rgba(124,58,237,.16);
}
/* Header: more solid corporate entry */
.site-header{
background:rgba(255,255,255,.97) !important;
box-shadow:0 10px 32px rgba(15,23,42,.06) !important;
}
.header__inner{
height:88px !important;
}
.main-nav{
font-size:14px !important;
gap:30px !important;
}
.header__cta{
height:50px !important;
min-width:164px !important;
border-radius:13px !important;
}
/* HERO — complete rebuild */
.hero{
min-height:760px !important;
padding:98px 0 72px !important;
position:relative !important;
overflow:hidden !important;
background:
radial-gradient(circle at 16% 26%, rgba(37,83,232,.24) 0%, rgba(37,83,232,.12) 26%, transparent 52%),
radial-gradient(circle at 54% 48%, rgba(124,58,237,.18) 0%, rgba(124,58,237,.08) 32%, transparent 62%),
linear-gradient(115deg,#e8f2ff 0%,#f0f6ff 31%,#ffffff 66%,#eef4ff 100%) !important;
}
.hero::before{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:
linear-gradient(90deg, rgba(232,242,255,.10) 0%, rgba(255,255,255,.02) 46%, rgba(255,255,255,0) 74%),
url("../png/hero/hero_background.webp") center/cover no-repeat !important;
opacity:.82 !important;
pointer-events:none !important;
}
.hero::after{
content:"" !important;
position:absolute !important;
inset:0 !important;
background:
linear-gradient(90deg, rgba(231,242,255,.34) 0%, rgba(242,248,255,.20) 28%, rgba(255,255,255,.04) 58%, rgba(255,255,255,0) 100%) !important;
pointer-events:none !important;
}
/* one full hero scene */
.hero__grid{
position:relative !important;
z-index:1 !important;
display:grid !important;
grid-template-columns:minmax(540px, .94fr) minmax(590px, 1.06fr) !important;
grid-template-areas:
"text visual"
"services services" !important;
align-items:center !important;
column-gap:10px !important;
row-gap:38px !important;
}
.hero__content{
grid-area:text !important;
max-width:720px !important;
padding:0 !important;
position:relative !important;
}
.hero__content::before{
display:none !important;
}
.hero h1{
font-size:72px !important;
line-height:1.03 !important;
font-weight:950 !important;
letter-spacing:-.06em !important;
max-width:720px !important;
text-wrap:balance !important;
}
.hero h1 span{
color:var(--blue-2) !important;
}
.lead{
max-width:600px !important;
margin-top:30px !important;
font-size:23px !important;
line-height:1.55 !important;
color:#3d4f68 !important;
}
.hero__actions{
margin-top:38px !important;
gap:18px !important;
}
.hero .btn{
min-height:60px !important;
padding-inline:34px !important;
border-radius:14px !important;
font-size:15.5px !important;
}
.hero__visual{
grid-area:visual !important;
min-height:560px !important;
display:grid !important;
place-items:center !important;
justify-items:center !important;
transform:translateX(-8px) scale(1.04) !important;
}
.hero-stack{
width:min(122%, 850px) !important;
max-width:none !important;
filter:drop-shadow(0 42px 74px rgba(37,83,232,.24)) !important;
}
/* service direction items are no longer a weak side column */
.service-list{
grid-area:services !important;
display:grid !important;
grid-template-columns:repeat(4,1fr) !important;
gap:18px !important;
margin:0 !important;
padding:0 !important;
position:relative !important;
z-index:2 !important;
}
.service-list li{
min-height:92px !important;
display:grid !important;
grid-template-columns:62px 1fr !important;
align-items:center !important;
gap:16px !important;
padding:18px 20px !important;
border-radius:22px !important;
background:rgba(255,255,255,.74) !important;
border:1px solid rgba(226,232,240,.82) !important;
box-shadow:0 22px 46px rgba(37,83,232,.12) !important;
backdrop-filter:blur(14px) !important;
}
.service-list span{
width:62px !important;
height:62px !important;
background:rgba(255,255,255,.92) !important;
border:1px solid rgba(226,232,240,.95) !important;
box-shadow:0 18px 34px rgba(37,83,232,.14) !important;
}
.service-list img{
width:32px !important;
height:32px !important;
}
.service-list b{
font-size:15.5px !important;
line-height:1.32 !important;
color:#14213a !important;
text-shadow:none !important;
}
/* Section rhythm */
.solutions{
padding-top:84px !important;
padding-bottom:76px !important;
}
.solutions h2,
.process h2,
.trust h2{
font-size:40px !important;
}
.cards-grid{
margin-top:48px !important;
gap:30px !important;
}
.solution-card{
min-height:286px !important;
padding:32px 28px !important;
border-radius:20px !important;
box-shadow:0 18px 42px rgba(15,23,42,.075) !important;
}
.solution-card h3{
font-size:22px !important;
}
.solution-card p{
font-size:16px !important;
line-height:1.64 !important;
}
/* Platform: no card feel, real full-width section */
.platform{
padding:86px 0 !important;
background:
radial-gradient(circle at 72% 42%, rgba(37,83,232,.13) 0%, transparent 43%),
linear-gradient(135deg,#eff6ff 0%,#ffffff 46%,#edf4ff 100%) !important;
}
.platform__box{
padding:0 !important;
border:0 !important;
box-shadow:none !important;
background:transparent !important;
border-radius:0 !important;
grid-template-columns:1.05fr .85fr 280px !important;
gap:34px !important;
}
.platform__text h2{
font-size:43px !important;
line-height:1.08 !important;
}
.platform__text p{
font-size:18px !important;
line-height:1.65 !important;
}
.check-list{
gap:15px !important;
}
.check-list li{
font-size:16.5px !important;
}
/* Process: implement the analysis, not just small CSS */
.process{
padding:84px 0 88px !important;
background:
linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
}
.process-line{
display:none !important;
}
.process-grid{
margin-top:54px !important;
display:grid !important;
grid-template-columns:repeat(5,1fr) !important;
gap:20px !important;
}
.process-grid li{
text-align:left !important;
min-height:236px !important;
padding:26px 20px 24px !important;
border-radius:22px !important;
background:#fff !important;
border:1px solid #E2E8F0 !important;
box-shadow:0 18px 42px rgba(15,23,42,.07) !important;
}
.step-num{
margin:0 0 22px !important;
width:44px !important;
height:44px !important;
font-size:17px !important;
}
.process-grid img{
width:46px !important;
height:46px !important;
margin:0 0 18px !important;
}
.process-grid h3{
font-size:18px !important;
margin-bottom:11px !important;
}
.process-grid p{
font-size:15px !important;
line-height:1.6 !important;
color:#4d5f78 !important;
}
/* Strong bands */
.trust{
padding:0 !important;
background:#061B54 url("../svg/backgrounds/trust_mesh_background.svg") center/cover no-repeat !important;
}
.trust__box{
padding:56px 0 58px !important;
background:transparent !important;
border-radius:0 !important;
}
.metrics strong{
font-size:44px !important;
}
.metrics span{
font-size:15px !important;
}
.client-logos b{
font-size:22px !important;
}
/* FinModel and CTA: bigger and more readable */
.finmodel{
padding:86px 0 !important;
background:
radial-gradient(circle at 76% 38%, rgba(37,83,232,.12) 0%, transparent 43%),
linear-gradient(135deg,#f4f9ff 0%,#ffffff 45%,#eef4ff 100%) !important;
}
.finmodel__box{
min-height:410px !important;
grid-template-columns:.9fr 1.1fr !important;
border:0 !important;
box-shadow:none !important;
background:transparent !important;
}
.finmodel h2{
font-size:44px !important;
}
.finmodel p{
font-size:18px !important;
line-height:1.62 !important;
}
.finmodel__visual{
min-height:360px !important;
}
.cta-section{
padding:0 !important;
background:linear-gradient(120deg,#e8f2ff 0%,#edf4ff 40%,#8147f6 100%) !important;
}
.cta__box{
min-height:190px !important;
padding:46px 0 !important;
background:transparent !important;
border-radius:0 !important;
}
.cta__box h2{
font-size:40px !important;
}
.cta__box p{
font-size:18px !important;
}
/* Footer readability */
.footer{
padding:62px 0 44px !important;
}
.footer h3{
font-size:16.5px !important;
}
.footer a,
.footer p{
font-size:15px !important;
}
/* Tablet */
@media (max-width:1180px){
.hero{
min-height:auto !important;
padding:72px 0 64px !important;
}
.hero__grid{
grid-template-columns:minmax(360px,.95fr) minmax(400px,1fr) !important;
grid-template-areas:
"text visual"
"services services" !important;
row-gap:30px !important;
}
.hero h1{
font-size:58px !important;
}
.lead{
font-size:20px !important;
}
.hero__visual{
min-height:430px !important;
transform:none !important;
}
.hero-stack{
width:min(112%, 660px) !important;
}
.platform__box{
grid-template-columns:1fr .85fr !important;
}
.platform__labels{
grid-column:1/-1 !important;
grid-template-columns:repeat(4,1fr) !important;
}
}
/* 900px */
@media (max-width:900px){
.header__inner{
height:74px !important;
}
.hero{
padding:50px 0 56px !important;
background:
radial-gradient(circle at 24% 10%, rgba(37,83,232,.16) 0%, transparent 52%),
linear-gradient(180deg,#edf5ff 0%,#f7fbff 56%,#ffffff 100%) !important;
}
.hero::before{
opacity:.54 !important;
background-position:70% center !important;
}
.hero::after{
background:linear-gradient(180deg,rgba(238,246,255,.66) 0%,rgba(248,251,255,.36) 50%,rgba(255,255,255,.10) 100%) !important;
}
.hero__grid{
grid-template-columns:1fr .95fr !important;
grid-template-areas:
"text visual"
"services services" !important;
}
.hero h1{
font-size:48px !important;
}
.hero__visual{
min-height:360px !important;
}
.hero-stack{
width:100% !important;
max-width:560px !important;
}
.service-list{
grid-template-columns:repeat(4,1fr) !important;
}
.service-list li{
grid-template-columns:1fr !important;
text-align:center !important;
justify-items:center !important;
padding:16px 12px !important;
}
.process-grid{
grid-template-columns:repeat(5,1fr) !important;
gap:12px !important;
}
.process-grid li{
padding:20px 12px !important;
min-height:220px !important;
}
}
/* Mobile */
@media (max-width:640px){
.hero{
padding:34px 0 44px !important;
}
.hero__grid{
display:flex !important;
flex-direction:column !important;
}
.hero h1{
font-size:42px !important;
line-height:1.08 !important;
}
.lead{
font-size:17px !important;
}
.hero .btn{
width:100% !important;
}
.hero__visual{
order:2 !important;
min-height:auto !important;
margin-top:10px !important;
}
.hero-stack{
max-width:430px !important;
}
.service-list{
order:3 !important;
grid-template-columns:1fr !important;
gap:12px !important;
width:100% !important;
}
.service-list li{
grid-template-columns:56px 1fr !important;
text-align:left !important;
justify-items:start !important;
padding:14px 16px !important;
min-height:80px !important;
}
.solutions h2,
.process h2,
.trust h2{
font-size:29px !important;
}
.cards-grid{
grid-template-columns:1fr !important;
}
.solution-card{
min-height:auto !important;
}
.process-grid{
grid-template-columns:1fr !important;
}
.process-grid li{
min-height:auto !important;
}
.process-grid p{
display:block !important;
}
.metrics{
grid-template-columns:repeat(2,1fr) !important;
}
.finmodel h2,
.cta__box h2{
font-size:31px !important;
}
}
/* Small mobile */
@media (max-width:420px){
.hero h1{
font-size:37px !important;
}
.service-list{
grid-template-columns:1fr !important;
}
}
/* =========================================================
VISUAL REBUILD FINAL — real visual assets and forms replaced
========================================================= */
/* Use newly created actual hero background image, not only gradients */
.hero{
min-height:780px !important;
padding:98px 0 74px !important;
background:#edf5ff url("../visual_rebuild/hero_fullwidth_scene.webp") center/cover no-repeat !important;
}
.hero::before{
background:linear-gradient(90deg, rgba(236,246,255,.20) 0%, rgba(247,251,255,.10) 36%, rgba(255,255,255,0) 68%) !important;
opacity:1 !important;
}
.hero::after{
background:linear-gradient(90deg, rgba(230,242,255,.18) 0%, rgba(255,255,255,.03) 56%, rgba(255,255,255,0) 100%) !important;
}
.hero__grid{
grid-template-columns:minmax(560px,.9fr) minmax(610px,1.1fr) !important;
grid-template-areas:
"text visual"
"services services" !important;
row-gap:40px !important;
}
.hero h1{
font-size:74px !important;
line-height:1.02 !important;
}
.lead{
font-size:23px !important;
max-width:610px !important;
}
.hero__visual{
min-height:590px !important;
transform:translateX(-26px) scale(1.04) !important;
}
.hero-stack{
content:url("../visual_rebuild/hero_foreground_transparent.webp");
width:min(126%, 900px) !important;
filter:drop-shadow(0 46px 76px rgba(37,83,232,.28)) !important;
}
/* Replace weak service list with clearly visible glass forms */
.service-list li{
min-height:104px !important;
border-radius:26px !important;
background:linear-gradient(135deg,rgba(255,255,255,.78) 0%,rgba(245,249,255,.60) 100%) !important;
border:1px solid rgba(190,210,255,.80) !important;
box-shadow:0 24px 56px rgba(37,83,232,.15) !important;
backdrop-filter:blur(18px) !important;
}
.service-list span{
border-radius:22px !important;
background:linear-gradient(135deg,#ffffff 0%,#eef4ff 100%) !important;
}
/* Real visual form changes for solution cards */
.solution-card{
position:relative !important;
overflow:hidden !important;
border-radius:24px !important;
background:
radial-gradient(circle at 78% 8%, rgba(37,83,232,.11) 0%, transparent 30%),
linear-gradient(180deg,#ffffff 0%,#fbfdff 100%) !important;
}
.solution-card::after{
content:"" !important;
position:absolute !important;
right:-36px !important;
bottom:-42px !important;
width:116px !important;
height:116px !important;
border-radius:34px !important;
background:linear-gradient(135deg,rgba(37,83,232,.12),rgba(124,58,237,.10)) !important;
transform:rotate(18deg) !important;
}
.solution-card > *{position:relative;z-index:1}
.iconbox{
border-radius:18px !important;
background:linear-gradient(135deg,#EEF4FF 0%,#E9EDFF 100%) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 12px 26px rgba(37,83,232,.11) !important;
}
/* Process gets actual visual background asset */
.process{
background:#fff url("../visual_rebuild/process_soft_grid.png") center/cover no-repeat !important;
}
.process-grid li{
border-radius:26px !important;
background:linear-gradient(180deg,rgba(255,255,255,.88) 0%,rgba(248,251,255,.82) 100%) !important;
backdrop-filter:blur(10px) !important;
}
/* Platform visual becomes stronger cardless scene */
.platform{
background:
url("../visual_rebuild/process_soft_grid.png") center/cover no-repeat,
linear-gradient(135deg,#eff6ff 0%,#ffffff 46%,#edf4ff 100%) !important;
}
.platform__visual img{
filter:drop-shadow(0 28px 54px rgba(37,83,232,.18)) !important;
transform:scale(1.12) !important;
}
/* FinModel panel stronger */
.finmodel__visual{
position:relative !important;
}
.finmodel__visual::before{
content:"" !important;
position:absolute !important;
inset:18px 30px 28px 0 !important;
border-radius:34px !important;
background:linear-gradient(135deg,rgba(37,83,232,.12),rgba(124,58,237,.08)) !important;
filter:blur(18px) !important;
}
.finmodel__visual img{
position:relative !important;
z-index:1 !important;
filter:drop-shadow(0 28px 54px rgba(37,83,232,.18)) !important;
}
/* CTA actual form stronger */
.cta-section{
background:
radial-gradient(circle at 78% 55%, rgba(255,255,255,.28) 0%, transparent 28%),
linear-gradient(120deg,#dfeeff 0%,#edf4ff 35%,#7846f5 100%) !important;
}
.cta__box::before{
content:"" !important;
position:absolute !important;
inset:22px auto auto 0 !important;
width:280px !important;
height:86px !important;
border-radius:999px !important;
background:rgba(37,83,232,.10) !important;
filter:blur(18px) !important;
}
/* Responsive */
@media (max-width:1180px){
.hero__grid{
grid-template-columns:minmax(390px,.95fr) minmax(430px,1fr) !important;
}
.hero h1{font-size:58px !important}
.hero__visual{min-height:470px !important;transform:none !important}
.hero-stack{width:min(112%,700px) !important}
}
@media (max-width:900px){
.hero{
min-height:auto !important;
background-position:66% center !important;
}
.hero h1{font-size:49px !important}
.hero__visual{min-height:380px !important}
.hero-stack{max-width:600px !important}
}
@media (max-width:640px){
.hero{
background-position:68% center !important;
}
.hero h1{font-size:42px !important}
.hero__visual{min-height:auto !important}
.hero-stack{max-width:440px !important}
}
@media (max-width:420px){
.hero h1{font-size:37px !important}
}
/* EXACT ORIGINAL BUSINESS-EVOLUTION BLOCKS
Source: business-evolution.zip / index.html + styles.css.
Scope: only #implementation and #faq. Hero/video-logo are not touched.
*/
/* Original FAQ/timeline tokens */
:root {
--be-bg: #f6f7fb;
--be-surface: #fff;
--be-surface-contrast: #eef1f6;
--be-text: #1f2735;
--be-muted: #5e6a81;
--be-primary: #4f46e5;
--be-primary-dark: #4338ca;
--be-border: #e2e8f0;
--be-shadow: 0 16px 60px rgb(18 38 63 / 12%);
--be-radius: 16px;
--be-blue: #4f46e5;
--be-faq-blue: #155FDC;
--be-dur: 360ms;
--be-ease: cubic-bezier(.2,.8,.2,1);
}
#implementation,
#faq {
position: relative;
padding: 96px 0;
background: #fff;
color: var(--be-text);
}
#implementation + section,
#faq + section {
border-top: 1px solid var(--be-border);
}
#implementation {
border-top: none;
border-bottom: none;
padding-bottom: 10px;
}
#implementation .container,
#faq .container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
#implementation .section-header {
margin-bottom: 32px;
}
#implementation h2,
#faq h2,
#implementation h3,
#faq h3 {
font-weight: 700;
color: var(--be-text);
}
#implementation h3,
#faq h3 {
font-size: 20px;
margin-bottom: 8px;
}
#implementation .lead {
font-size: 18px;
color: var(--be-muted);
margin: 16px 0 24px;
}
#faq .grid.two-cols,
#faq .two-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px;
align-items: center;
}
/* Apple-style reveal animations from original site */
#implementation.reveal,
#faq.reveal {
opacity: 0;
transform: translateY(24px) scale(0.98);
transition:
opacity 0.8s cubic-bezier(0.25, 0.1, 0.25, 1),
transform 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
}
#implementation.reveal.visible,
#faq.reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
#implementation.reveal-fade-down {
transform: translateY(-24px) scale(0.98);
}
/* Exact original FAQ visual system */
#faq .faq-grid {
grid-template-columns: 520px 1fr;
gap: 72px;
align-items: start;
}
#faq .faq-title {
margin: 8px 0 0;
}
#faq .title {
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.02;
font-size: clamp(44px, 6vw, 68px);
color: #2B2B2B;
text-align: left;
}
#faq .title .blue {
color: var(--be-faq-blue);
display: block;
}
#faq .title .black {
display: block;
}
#faq .faq {
display: flex;
flex-direction: column;
gap: 22px;
padding-top: 8px;
}
#faq .faq-item {
background: var(--be-surface);
border: 1px solid var(--be-border);
border-radius: 18px;
box-shadow: var(--be-shadow);
overflow: hidden;
transition: box-shadow 0.3s ease;
}
#faq .faq-head {
margin: 0;
}
#faq .faq-trigger {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
padding: 24px 22px 24px 26px;
border: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: padding 0.3s ease;
}
#faq .faq-trigger:focus-visible {
outline: 3px solid var(--be-primary);
outline-offset: -3px;
border-radius: 16px;
}
#faq .faq-q {
min-width: 0;
margin: 0;
font-size: 24px;
font-weight: 700;
line-height: 1.15;
color: #1E2430;
transition: all 0.3s ease;
}
#faq .icon-btn {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 999px;
background: var(--be-blue);
display: grid;
place-items: center;
transition: transform var(--be-dur) var(--be-ease), background 0.3s ease;
}
#faq .icon-btn svg {
display: block;
transition: transform var(--be-dur) var(--be-ease);
}
#faq .faq-body {
padding: 0 26px;
max-width: 820px;
max-height: 0;
overflow: hidden;
opacity: 0;
visibility: hidden;
transition:
max-height var(--be-dur) var(--be-ease),
padding var(--be-dur) var(--be-ease),
opacity 220ms var(--be-ease),
visibility 0s linear var(--be-dur);
}
#faq .faq-item.open .faq-body {
padding: 22px 26px;
opacity: 1;
visibility: visible;
transition:
max-height var(--be-dur) var(--be-ease),
padding var(--be-dur) var(--be-ease),
opacity 220ms var(--be-ease),
visibility 0s linear 0s;
}
#faq .faq-item.open .icon-btn {
transform: rotate(45deg);
}
#faq .faq-a {
margin: 0;
color: var(--be-text);
line-height: 1.6;
}
#faq .faq-a p {
margin: 0 0 12px;
}
#faq .faq-a ul {
margin: 8px 0 0;
padding-left: 20px;
}
#faq .faq-item:hover {
box-shadow: 0 12px 32px rgb(79 70 229 / 15%);
}
#faq .faq-item:hover .icon-btn {
background: var(--be-primary-dark);
transform: scale(1.05);
}
#faq .faq-item.open:hover .icon-btn {
transform: rotate(45deg) scale(1.05);
}
#faq .faq-item:hover .faq-q {
color: var(--be-primary);
}
/* Exact original vertical timeline */
#implementation .timeline-container {
position: relative;
max-width: 800px;
margin: 40px auto 0;
padding: 20px 0;
}
#implementation .timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--be-primary), rgb(79 70 229 / 30%));
transform: translateX(-50%);
border-radius: 2px;
}
#implementation .timeline-step {
position: relative;
display: flex;
align-items: flex-start;
margin-bottom: 40px;
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#implementation .timeline-step.visible {
opacity: 1;
transform: translateY(0);
}
#implementation .timeline-step:nth-child(1),
#implementation .timeline-step:nth-child(2),
#implementation .timeline-step:nth-child(3),
#implementation .timeline-step:nth-child(4) {
transition-delay: 0s;
}
#implementation .timeline-marker {
position: relative;
width: 100px;
flex-shrink: 0;
display: none;
flex-direction: column;
align-items: center;
}
#implementation .timeline-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--be-primary);
position: relative;
z-index: 2;
box-shadow: 0 0 0 8px rgb(79 70 229 / 15%);
transition: all 0.3s ease;
}
#implementation .timeline-number {
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--be-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 20px;
margin-top: 108px;
box-shadow: 0 4px 12px rgb(79 70 229 / 30%);
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
top: 90%;
transform: translateY(-90%) scale(0.8);
}
@media (width >= 769px) {
#implementation .timeline-marker {
display: flex !important;
}
#implementation .timeline-dot {
display: none;
}
#implementation .timeline-number {
margin-top: 0;
position: relative;
top: 90%;
transform: translateY(-90%) scale(0.8);
}
#implementation .timeline-content {
margin-top: -40px;
}
#implementation .timeline-step {
margin-bottom: 100px;
}
}
#implementation .timeline-content {
flex: 1;
background: var(--be-surface);
border: 1px solid var(--be-border);
border-radius: var(--be-radius);
padding: 24px;
box-shadow: var(--be-shadow);
margin-left: -20px;
position: relative;
z-index: 1;
transform: translateX(20px);
opacity: 0.8;
transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
#implementation .timeline-content h3 {
color: var(--be-text);
margin-bottom: 8px;
}
#implementation .timeline-content p {
color: var(--be-muted);
margin: 0;
line-height: 1.6;
}
#implementation .timeline-step.visible .timeline-content {
transform: translateX(0);
opacity: 1;
}
#implementation .timeline-step.visible .timeline-number {
transform: scale(1);
}
#implementation .timeline-step:hover .timeline-dot {
transform: scale(1.2);
box-shadow: 0 0 0 12px rgb(79 70 229 / 20%);
}
#implementation .timeline-step:hover .timeline-content {
transform: translateY(-4px) !important;
box-shadow: 0 12px 32px rgb(79 70 229 / 20%) !important;
}
@keyframes be-fade-in-up {
from { opacity: 0; transform: translateY(40px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes be-pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.1); opacity: 0.8; }
}
/* Responsive original blocks */
@media (width <= 1200px) {
#faq .faq-grid {
grid-template-columns: 1fr;
gap: 36px;
}
#faq .title {
font-size: clamp(36px, 5vw, 54px);
}
}
@media (width <= 768px) {
#implementation .timeline-container {
padding: 10px 0;
}
#implementation .timeline-line {
left: 20px;
}
#implementation .timeline-step {
flex-direction: column;
align-items: flex-start;
margin-bottom: 30px;
}
#implementation .timeline-step:nth-child(even) {
flex-direction: column;
}
#implementation .timeline-marker {
width: auto;
flex-direction: row;
align-items: center;
margin-bottom: 12px;
display: flex !important;
}
#implementation .timeline-content {
width: 100%;
margin-left: 10px !important;
margin-right: 0 !important;
}
#implementation .timeline-number {
margin-left: 16px;
margin-top: 0;
}
}
@media (prefers-reduced-motion: reduce) {
#implementation.reveal,
#faq.reveal,
#implementation .timeline-step,
#implementation .timeline-content,
#implementation .timeline-number,
#faq .faq-body,
#faq .icon-btn,
#faq .icon-btn svg,
#faq .faq-item,
#faq .faq-head,
#faq .faq-trigger,
#faq .faq-q {
transition: none !important;
}
}
/* =========================================================
MORE ORIGINAL-SITE ANIMATION PACK
Source logic: business-evolution.zip animation model:
- reveal / visible
- staggered cards
- timeline-step sequential reveal
- FAQ smooth max-height accordion
- hover/micro-interactions
Added to the current page without changing hero images or video-logo.
========================================================= */
@keyframes evb-fade-up {
from {
opacity:0;
transform:translateY(34px) scale(.985);
}
to {
opacity:1;
transform:translateY(0) scale(1);
}
}
@keyframes evb-fade-left {
from {
opacity:0;
transform:translateX(-34px) scale(.985);
}
to {
opacity:1;
transform:translateX(0) scale(1);
}
}
@keyframes evb-fade-right {
from {
opacity:0;
transform:translateX(34px) scale(.985);
}
to {
opacity:1;
transform:translateX(0) scale(1);
}
}
@keyframes evb-soft-float {
0%,100% { transform:translate3d(0,0,0); }
50% { transform:translate3d(0,-16px,0); }
}
@keyframes evb-glow-pulse {
0%,100% { filter:drop-shadow(0 42px 74px rgba(37,83,232,.22)); }
50% { filter:drop-shadow(0 54px 90px rgba(37,83,232,.34)); }
}
@keyframes evb-light-parallax {
0% { transform:translate3d(-1%,0,0) scale(1); opacity:.70; }
50% { transform:translate3d(2.5%,1.5%,0) scale(1.04); opacity:.95; }
100% { transform:translate3d(-1%,0,0) scale(1); opacity:.70; }
}
@keyframes evb-line-flow {
from { background-position:0 0; }
to { background-position:220px 0; }
}
/* Global reveal helpers */
.anim-section {
position:relative;
}
.anim-section:not(.anim-visible) > .container,
.anim-section:not(.anim-visible).trust .trust__box {
opacity:0;
transform:translateY(30px) scale(.985);
}
.anim-section.anim-visible > .container,
.anim-section.anim-visible.trust .trust__box {
opacity:1;
transform:translateY(0) scale(1);
transition:
opacity .86s cubic-bezier(.25,.1,.25,1),
transform .86s cubic-bezier(.25,.1,.25,1);
}
/* Header entrance and micro-interactions */
.site-header {
animation:evb-fade-up .72s cubic-bezier(.25,.1,.25,1) both;
}
.main-nav a,
.header__cta,
.btn,
.solution-card,
.sequence-content,
.faq-item {
transition:
transform .28s cubic-bezier(.2,.8,.2,1),
box-shadow .28s cubic-bezier(.2,.8,.2,1),
border-color .28s cubic-bezier(.2,.8,.2,1),
color .28s cubic-bezier(.2,.8,.2,1),
background .28s cubic-bezier(.2,.8,.2,1);
}
.main-nav a:hover {
transform:translateY(-1px);
}
.header__cta:hover,
.btn:hover {
transform:translateY(-2px);
box-shadow:0 18px 38px rgba(37,83,232,.28);
}
/* Hero animation */
.hero::before {
animation:evb-light-parallax 12s ease-in-out infinite;
will-change:transform,opacity;
}
.hero__content,
.hero__visual,
.service-list li {
opacity:0;
}
.hero.anim-visible .hero__content {
animation:evb-fade-left .9s cubic-bezier(.25,.1,.25,1) .08s both;
}
.hero.anim-visible .hero__visual {
animation:evb-fade-right .9s cubic-bezier(.25,.1,.25,1) .18s both;
}
.hero.anim-visible .hero-stack {
animation:
evb-soft-float 6.5s ease-in-out 1.1s infinite,
evb-glow-pulse 7s ease-in-out 1.1s infinite;
will-change:transform,filter;
}
.hero.anim-visible .service-list li {
animation:evb-fade-up .72s cubic-bezier(.25,.1,.25,1) both;
}
.hero.anim-visible .service-list li:nth-child(1){animation-delay:.42s}
.hero.anim-visible .service-list li:nth-child(2){animation-delay:.52s}
.hero.anim-visible .service-list li:nth-child(3){animation-delay:.62s}
.hero.anim-visible .service-list li:nth-child(4){animation-delay:.72s}
.service-list li:hover {
transform:translateY(-5px);
box-shadow:0 30px 70px rgba(37,83,232,.18) !important;
}
/* Staggered solution cards */
.solution-card,
.platform__text,
.platform__visual,
.platform__labels li,
.metrics > div,
.client-logos b,
.finmodel__text,
.finmodel__visual,
.cta__box > * {
opacity:0;
transform:translateY(28px) scale(.985);
}
.anim-visible .solution-card,
.anim-visible .platform__text,
.anim-visible .platform__visual,
.anim-visible .platform__labels li,
.anim-visible .metrics > div,
.anim-visible .client-logos b,
.anim-visible .finmodel__text,
.anim-visible .finmodel__visual,
.anim-visible .cta__box > * {
opacity:1;
transform:translateY(0) scale(1);
transition:
opacity .74s cubic-bezier(.25,.1,.25,1),
transform .74s cubic-bezier(.25,.1,.25,1);
}
.anim-visible .solution-card:nth-child(1){transition-delay:.08s}
.anim-visible .solution-card:nth-child(2){transition-delay:.18s}
.anim-visible .solution-card:nth-child(3){transition-delay:.28s}
.anim-visible .solution-card:nth-child(4){transition-delay:.38s}
.solution-card:hover {
transform:translateY(-8px) scale(1.015) !important;
box-shadow:0 28px 64px rgba(37,83,232,.15) !important;
border-color:rgba(37,83,232,.26) !important;
}
.solution-card:hover .iconbox {
transform:translateY(-2px) scale(1.05);
}
.iconbox {
transition:transform .28s cubic-bezier(.2,.8,.2,1);
}
/* Platform sequence */
.anim-visible .platform__text{transition-delay:.08s}
.anim-visible .platform__visual{transition-delay:.20s}
.anim-visible .platform__labels li:nth-child(1){transition-delay:.30s}
.anim-visible .platform__labels li:nth-child(2){transition-delay:.40s}
.anim-visible .platform__labels li:nth-child(3){transition-delay:.50s}
.anim-visible .platform__labels li:nth-child(4){transition-delay:.60s}
.platform__visual img {
transition:transform .5s cubic-bezier(.2,.8,.2,1), filter .5s cubic-bezier(.2,.8,.2,1);
}
.platform__visual:hover img {
transform:scale(1.18) translateY(-6px) !important;
filter:drop-shadow(0 38px 70px rgba(37,83,232,.24)) !important;
}
/* Exact original timeline: add stronger line flow while preserving original classes */
#implementation .timeline-line {
background:
linear-gradient(to bottom, var(--be-primary), rgb(79 70 229 / 30%)),
repeating-linear-gradient(to bottom, rgba(255,255,255,.0) 0 18px, rgba(255,255,255,.45) 18px 28px);
}
#implementation.visible .timeline-line {
animation:evb-line-flow 3.4s linear infinite;
}
#implementation .timeline-content:hover {
transform:translateY(-6px) !important;
}
/* Trust metrics stagger and count-up highlight */
.anim-visible .metrics > div:nth-child(1){transition-delay:.06s}
.anim-visible .metrics > div:nth-child(2){transition-delay:.18s}
.anim-visible .metrics > div:nth-child(3){transition-delay:.30s}
.anim-visible .metrics > div:nth-child(4){transition-delay:.42s}
.anim-visible .client-logos b:nth-child(1){transition-delay:.48s}
.anim-visible .client-logos b:nth-child(2){transition-delay:.56s}
.anim-visible .client-logos b:nth-child(3){transition-delay:.64s}
.anim-visible .client-logos b:nth-child(4){transition-delay:.72s}
.anim-visible .client-logos b:nth-child(5){transition-delay:.80s}
.anim-visible .client-logos b:nth-child(6){transition-delay:.88s}
.metrics strong {
display:inline-block;
transition:transform .32s cubic-bezier(.2,.8,.2,1), text-shadow .32s ease;
}
.metrics div:hover strong {
transform:translateY(-3px) scale(1.04);
text-shadow:0 0 24px rgba(255,255,255,.35);
}
/* FinModel and CTA */
.anim-visible .finmodel__text{transition-delay:.08s}
.anim-visible .finmodel__visual{transition-delay:.22s}
.finmodel__visual img {
transition:transform .55s cubic-bezier(.2,.8,.2,1), filter .55s cubic-bezier(.2,.8,.2,1);
}
.finmodel__visual:hover img {
transform:translateY(8px) scale(1.035) !important;
filter:drop-shadow(0 36px 70px rgba(37,83,232,.22)) !important;
}
.anim-visible .cta__box > *:nth-child(1){transition-delay:.08s}
.anim-visible .cta__box > *:nth-child(2){transition-delay:.20s}
.anim-visible .cta__box > *:nth-child(3){transition-delay:.32s}
/* FAQ exact animation enhancement */
#faq.visible .faq-item {
animation:evb-fade-up .62s cubic-bezier(.25,.1,.25,1) both;
}
#faq.visible .faq-item:nth-child(1){animation-delay:.08s}
#faq.visible .faq-item:nth-child(2){animation-delay:.16s}
#faq.visible .faq-item:nth-child(3){animation-delay:.24s}
#faq.visible .faq-item:nth-child(4){animation-delay:.32s}
#faq.visible .faq-item:nth-child(5){animation-delay:.40s}
/* Footer stagger */
.footer__grid > *,
.footer__bottom > * {
opacity:0;
transform:translateY(24px);
}
.footer.anim-visible .footer__grid > *,
.footer.anim-visible .footer__bottom > * {
opacity:1;
transform:translateY(0);
transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
}
.footer.anim-visible .footer__grid > *:nth-child(1){transition-delay:.04s}
.footer.anim-visible .footer__grid > *:nth-child(2){transition-delay:.12s}
.footer.anim-visible .footer__grid > *:nth-child(3){transition-delay:.20s}
.footer.anim-visible .footer__grid > *:nth-child(4){transition-delay:.28s}
.footer.anim-visible .footer__grid > *:nth-child(5){transition-delay:.36s}
.footer.anim-visible .footer__bottom > *:nth-child(1){transition-delay:.44s}
.footer.anim-visible .footer__bottom > *:nth-child(2){transition-delay:.52s}
.footer.anim-visible .footer__bottom > *:nth-child(3){transition-delay:.60s}
/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation:none !important;
transition:none !important;
scroll-behavior:auto !important;
}
.anim-section:not(.anim-visible) > .container,
.anim-section:not(.anim-visible).trust .trust__box,
.hero__content,
.hero__visual,
.service-list li,
.solution-card,
.platform__text,
.platform__visual,
.platform__labels li,
.metrics > div,
.client-logos b,
.finmodel__text,
.finmodel__visual,
.cta__box > *,
.footer__grid > *,
.footer__bottom > * {
opacity:1 !important;
transform:none !important;
}
}
/* FAQ MOBILE ONLY FIX
Scope: only mobile viewport. Desktop/tablet FAQ grid is not changed here.
*/
@media (max-width: 640px) {
#faq {
padding: 56px 0 !important;
}
#faq .container {
padding-left: 18px !important;
padding-right: 18px !important;
}
#faq .faq-grid {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 24px !important;
}
#faq .faq-title {
margin: 0 !important;
}
#faq .title {
font-size: 34px !important;
line-height: 1.05 !important;
letter-spacing: -0.035em !important;
max-width: 360px !important;
}
#faq .faq {
gap: 12px !important;
padding-top: 0 !important;
}
#faq .faq-item {
border-radius: 16px !important;
}
#faq .faq-trigger {
min-height: auto !important;
padding: 17px 16px !important;
gap: 12px !important;
align-items: flex-start !important;
}
#faq .faq-q {
font-size: 18px !important;
line-height: 1.28 !important;
letter-spacing: -0.015em !important;
max-width: calc(100% - 48px) !important;
}
#faq .icon-btn {
flex: 0 0 36px !important;
width: 36px !important;
height: 36px !important;
margin-top: -2px !important;
}
#faq .icon-btn svg {
width: 16px !important;
height: 16px !important;
}
#faq .faq-body {
padding-left: 16px !important;
padding-right: 16px !important;
}
#faq .faq-item.open .faq-body {
padding: 14px 16px 18px !important;
}
#faq .faq-a {
font-size: 15px !important;
line-height: 1.55 !important;
}
}
@media (max-width: 420px) {
#faq .container {
padding-left: 14px !important;
padding-right: 14px !important;
}
#faq .title {
font-size: 31px !important;
}
#faq .faq-q {
font-size: 17px !important;
line-height: 1.28 !important;
}
#faq .faq-trigger {
padding: 15px 14px !important;
}
#faq .icon-btn {
flex-basis: 34px !important;
width: 34px !important;
height: 34px !important;
}
}
/* END FAQ MOBILE ONLY FIX */
/* FAQ DESKTOP JERK FIX
Scope: desktop/tablet >= 641px only.
Cause fixed: desktop FAQ body no longer animates max-height + padding together
and JS no longer switches max-height to "none" after opening.
*/
@media (min-width: 641px) {
#faq .faq-body {
height: 0;
max-height: none !important;
padding: 0 !important;
overflow: hidden;
opacity: 0;
visibility: hidden;
will-change: height, opacity;
transition:
height var(--be-dur, 360ms) var(--be-ease, cubic-bezier(.2,.8,.2,1)),
opacity 220ms var(--be-ease, cubic-bezier(.2,.8,.2,1)),
visibility 0s linear var(--be-dur, 360ms) !important;
}
#faq .faq-item.open .faq-body {
padding: 0 !important;
opacity: 1;
visibility: visible;
transition:
height var(--be-dur, 360ms) var(--be-ease, cubic-bezier(.2,.8,.2,1)),
opacity 220ms var(--be-ease, cubic-bezier(.2,.8,.2,1)),
visibility 0s linear 0s !important;
}
#faq .faq-a {
box-sizing: border-box;
padding: 22px 26px;
}
#faq .faq-item {
contain: layout paint;
}
#faq .faq-head {
transform: translateZ(0);
backface-visibility: hidden;
}
#faq .icon-btn {
will-change: transform;
}
}
/* END FAQ DESKTOP JERK FIX */
/* MULTIPAGE CURRENT DESIGN SYSTEM
One CSS system for current Эволюция бизнеса homepage + generated multipage pages.
Content source: business-evolution.zip pages. Old CSS is not copied.
*/
/* Source menu hierarchy in current header style */
.nav-dropdown {
position: relative;
display: inline-flex;
align-items: center;
}
.nav-dropdown__trigger::after {
content: "▾";
display: inline-block;
margin-left: 6px;
font-size: 10px;
transform: translateY(-1px);
opacity: .7;
}
.nav-dropdown__panel {
position: absolute;
top: calc(100% + 14px);
left: 0;
min-width: 270px;
padding: 10px;
border: 1px solid rgba(210, 220, 240, .95);
border-radius: 18px;
background: rgba(255,255,255,.98);
box-shadow: 0 24px 70px rgba(15,23,42,.13);
backdrop-filter: blur(14px);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
z-index: 100;
}
.nav-dropdown:hover .nav-dropdown__panel,
.nav-dropdown:focus-within .nav-dropdown__panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown__panel a {
display: block;
padding: 11px 12px;
border-radius: 12px;
color: var(--text);
text-decoration: none;
white-space: nowrap;
}
.nav-dropdown__panel a:hover {
background: #EEF4FF;
color: var(--primary);
}
.mobile-subitem {
padding-left: 30px !important;
color: var(--muted) !important;
font-size: 14px !important;
}
/* Multipage body baseline */
body.multipage {
background: #fff;
color: var(--text);
}
body.multipage main {
overflow: hidden;
}
body.multipage .section {
position: relative;
padding: 94px 0;
}
body.multipage .container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
body.multipage .hero {
padding: 96px 0 82px;
background:
radial-gradient(circle at 82% 18%, rgba(37,83,232,.10), transparent 28%),
linear-gradient(135deg, #F3F8FF 0%, #FFFFFF 48%, #EDF4FF 100%);
}
body.multipage .hero-split,
body.multipage .content-grid {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .72fr);
gap: 44px;
align-items: start;
}
body.multipage .hero-card {
max-width: 820px;
padding: 40px;
border: 1px solid #E2E8F0;
border-radius: 30px;
background:
radial-gradient(circle at 88% 10%, rgba(37,83,232,.10), transparent 28%),
rgba(255,255,255,.82);
box-shadow: 0 24px 70px rgba(37,83,232,.12);
}
body.multipage .eyebrow,
body.multipage .meta-note {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 16px;
color: var(--primary);
font-size: 13px;
line-height: 1;
font-weight: 850;
text-transform: uppercase;
letter-spacing: .08em;
}
body.multipage h1 {
max-width: 820px;
margin: 0;
font-size: clamp(42px, 5.8vw, 70px);
line-height: 1.03;
letter-spacing: -0.06em;
}
body.multipage h2,
body.multipage .section-header h2 {
max-width: 860px;
margin: 0;
font-size: clamp(34px, 4.4vw, 52px);
line-height: 1.08;
letter-spacing: -0.045em;
}
body.multipage h3 {
margin: 0 0 10px;
font-size: 22px;
line-height: 1.18;
letter-spacing: -0.025em;
}
body.multipage p,
body.multipage li {
color: var(--muted);
font-size: 17px;
line-height: 1.65;
}
body.multipage .lead {
max-width: 720px;
margin: 22px 0 0;
color: #42536B;
font-size: 22px;
line-height: 1.55;
}
body.multipage ul {
margin: 18px 0 0;
padding-left: 20px;
}
body.multipage li + li {
margin-top: 8px;
}
body.multipage .cta-row {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 30px;
}
body.multipage .hero-side {
display: grid;
gap: 18px;
}
body.multipage .mini-card,
body.multipage .callout-card,
body.multipage .cta-panel,
body.multipage .case-card,
body.multipage .solution-tool-card {
position: relative;
overflow: hidden;
border: 1px solid #E2E8F0;
border-radius: 24px;
background:
radial-gradient(circle at 90% 0%, rgba(37,83,232,.09), transparent 30%),
#fff;
box-shadow: 0 18px 48px rgba(15,23,42,.065);
}
body.multipage .mini-card,
body.multipage .callout-card,
body.multipage .cta-panel {
padding: 26px;
}
body.multipage .mini-card h3,
body.multipage .callout-card h3,
body.multipage .cta-panel h3 {
color: var(--text);
}
body.multipage .content-grid > div:first-child {
min-width: 0;
}
body.multipage .content-grid > div:first-child > p {
max-width: 760px;
}
body.multipage .content-grid > div:last-child {
display: grid;
gap: 18px;
}
body.multipage .section-header {
max-width: 860px;
margin-bottom: 34px;
}
body.multipage .section-header p {
margin-top: 16px;
max-width: 760px;
}
/* Tools / cards */
body.multipage .solution-tools-grid,
body.multipage .case-grid,
body.multipage .cards-grid,
body.multipage .grid.cards,
body.multipage .tool-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 22px;
}
body.multipage .solution-tool-card,
body.multipage .case-card {
min-height: 230px;
padding: 28px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
body.multipage .solution-tool-card:hover,
body.multipage .case-card:hover {
transform: translateY(-6px);
border-color: rgba(37,83,232,.28);
box-shadow: 0 26px 60px rgba(37,83,232,.13);
}
body.multipage .card-link,
body.multipage .cta-panel a,
body.multipage .hero a,
body.multipage .section a {
color: var(--primary);
font-weight: 850;
text-decoration: none;
}
body.multipage .card-link {
display: inline-flex;
margin-top: 18px;
}
body.multipage .btn,
body.multipage .primary,
body.multipage a.primary {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
padding: 0 22px;
border-radius: 14px;
background: var(--primary);
color: #fff !important;
font-weight: 850;
text-decoration: none;
box-shadow: 0 18px 40px rgba(37,83,232,.20);
}
body.multipage .btn.secondary,
body.multipage .secondary,
body.multipage a.secondary {
background: #fff;
color: var(--primary) !important;
border: 1px solid #DDE7FF;
box-shadow: none;
}
/* Diagnostic form from source content */
body.multipage form {
display: grid;
gap: 12px;
}
body.multipage input,
body.multipage textarea {
width: 100%;
min-height: 48px;
padding: 12px 14px;
border: 1px solid #DDE5F4;
border-radius: 12px;
font: inherit;
color: var(--text);
background: #fff;
}
body.multipage textarea {
min-height: 120px;
resize: vertical;
}
body.multipage label {
display: grid;
gap: 8px;
color: var(--text);
font-weight: 700;
}
/* Privacy / legal */
body.multipage .legal-content,
body.multipage .text-content {
max-width: 860px;
}
body.multipage .legal-content p,
body.multipage .text-content p {
margin-bottom: 14px;
}
/* Reveal animation for inner pages */
body.multipage .reveal {
opacity: 0;
transform: translateY(24px) scale(.985);
transition: opacity .75s cubic-bezier(.25,.1,.25,1), transform .75s cubic-bezier(.25,.1,.25,1);
}
body.multipage .reveal.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
/* Tool pages */
body.tool-page .hero {
padding-bottom: 62px;
}
body.tool-page .content-grid {
grid-template-columns: minmax(0, .95fr) minmax(320px, .7fr);
}
/* Footer/header current style strengthening for multipage */
body.multipage .footer,
body.home-page .footer {
margin-top: 0;
}
@media (max-width: 1100px) {
.main-nav {
gap: 16px !important;
font-size: 13px !important;
}
.nav-dropdown__panel {
min-width: 250px;
}
body.multipage .solution-tools-grid,
body.multipage .case-grid,
body.multipage .cards-grid,
body.multipage .grid.cards,
body.multipage .tool-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
}
@media (max-width: 900px) {
.nav-dropdown {
display: none;
}
body.multipage .section {
padding: 66px 0;
}
body.multipage .hero {
padding: 70px 0 58px;
}
body.multipage .hero-split,
body.multipage .content-grid {
grid-template-columns: 1fr;
gap: 28px;
}
body.multipage .hero-card {
padding: 28px;
}
body.multipage h1 {
font-size: clamp(38px, 9vw, 54px);
}
body.multipage h2,
body.multipage .section-header h2 {
font-size: clamp(31px, 7vw, 43px);
}
body.multipage .lead {
font-size: 19px;
}
}
@media (max-width: 640px) {
body.multipage .container {
padding: 0 18px;
}
body.multipage .section {
padding: 54px 0;
}
body.multipage .hero {
padding: 58px 0 46px;
}
body.multipage .hero-card,
body.multipage .mini-card,
body.multipage .callout-card,
body.multipage .cta-panel,
body.multipage .solution-tool-card,
body.multipage .case-card {
border-radius: 18px;
padding: 20px;
}
body.multipage .solution-tools-grid,
body.multipage .case-grid,
body.multipage .cards-grid,
body.multipage .grid.cards,
body.multipage .tool-grid {
grid-template-columns: 1fr;
gap: 14px;
}
body.multipage p,
body.multipage li {
font-size: 15.5px;
}
body.multipage .lead {
font-size: 17px;
}
}
/* END MULTIPAGE CURRENT DESIGN SYSTEM */
/* SOURCE PAGE TEMPLATE RESTORED
Source: business-evolution/page-template.css.
Required for original tools Lottie blocks.
*/
:root {
--radius: 20px;
--radius-lg: 28px;
--shadow: var(--shadow-card, 0 16px 34px rgba(15,23,42,.07));
}
.page-shell {
display:grid;
grid-template-columns: minmax(0,1fr);
gap:32px;
}
.page-shell.has-sidebar {
grid-template-columns: 320px minmax(0,1fr);
align-items:start;
}
.page-sidebar {
position: sticky;
top: 110px;
border:1px solid var(--border);
border-radius: var(--radius);
background:#fff;
box-shadow: var(--shadow);
padding:24px;
}
.page-sidebar ul {
list-style:none;
margin:0;
padding:0;
}
.page-sidebar li {
margin:0;
padding:0;
}
.page-sidebar .menu-group {
margin-top:20px;
}
.page-sidebar .menu-label {
display:block;
font-weight:700;
font-size:13px;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--muted);
margin-bottom:12px;
}
.page-sidebar .menu-link {
display:block;
padding:8px 0;
color:var(--text);
text-decoration:none;
border-bottom:1px solid rgb(15 23 42 / 6%);
}
.page-sidebar .menu-link.active {
color:var(--primary);
font-weight:700;
}
.page-sidebar .menu-children {
padding-left:0;
}
.page-sidebar .menu-group-items {
padding-left:14px;
}
.page-main-card {
border:1px solid var(--border);
border-radius: var(--radius-lg);
background: rgb(255 255 255 / 95%);
box-shadow: var(--shadow);
padding: clamp(24px, 4vw, 48px);
}
.page-title {
margin:0 0 24px;
font-size: clamp(32px, 4vw, 52px);
line-height:1.05;
}
.page-lottie-grid {
display:grid;
grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
gap:20px;
margin-bottom:28px;
}
.page-lottie {
min-height:220px;
border:1px solid var(--border);
border-radius: 24px;
background: linear-gradient(180deg, rgb(248 250 252 / 96%), rgb(241 245 249 / 92%));
box-shadow: var(--shadow);
}
.page-content-raw {
white-space: pre-wrap;
line-height: 1.75;
font-size: 16px;
color: var(--text);
}
.page-content-raw:empty {
display:none;
}
.page-spacer {
height: 24px;
}
@media (width <= 960px) {
.page-shell.has-sidebar {
grid-template-columns: 1fr;
}
.page-sidebar {
position: static;
order:2;
}
.page-main-card {
order:1;
}
}
.page-main-card.reveal {
opacity: 1;
transform: none;
}
.page-lottie {
display: grid;
place-items: center;
overflow: hidden;
}
.page-lottie svg,
.page-lottie canvas {
width: 100% !important;
height: 100% !important;
display: block;
}
/* END SOURCE PAGE TEMPLATE RESTORED */
/* =========================================================
MEGA MENU UPDATE — products grouped by business directions
========================================================= */
.main-nav{
gap:22px !important;
}
.nav-dropdown--mega{
position:relative;
}
.nav-dropdown--mega .nav-dropdown__panel{
top:calc(100% + 18px);
left:50%;
min-width:0;
width:min(940px, calc(100vw - 48px));
padding:22px;
border-radius:22px;
transform:translate(-50%, 10px);
}
.nav-dropdown--mega:hover .nav-dropdown__panel,
.nav-dropdown--mega:focus-within .nav-dropdown__panel{
transform:translate(-50%, 0);
}
.mega-menu{
text-transform:none;
line-height:1.25;
}
.mega-menu__grid{
display:grid;
gap:14px;
}
.mega-menu__grid--solutions{
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.mega-menu__grid--products{
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:18px 22px;
}
.mega-menu__item{
display:block !important;
padding:16px !important;
border-radius:16px !important;
background:#fff;
border:1px solid rgba(226,232,240,.95);
white-space:normal !important;
}
.mega-menu__item strong{
display:block;
color:var(--navy);
font-size:15px;
font-weight:900;
letter-spacing:-.02em;
margin-bottom:7px;
}
.mega-menu__item span{
display:block;
color:#5a6b83;
font-size:13px;
font-weight:600;
line-height:1.42;
}
.mega-menu__group{
padding:6px 4px 2px;
}
.mega-menu__group p{
margin:0 0 9px;
color:var(--blue-2);
font-size:13px;
font-weight:950;
letter-spacing:.02em;
text-transform:uppercase;
}
.mega-menu__group a{
display:block !important;
padding:9px 10px !important;
border-radius:11px !important;
white-space:normal !important;
color:#26354d !important;
font-size:14px;
font-weight:760;
line-height:1.28;
}
.mega-menu__group a:hover,
.mega-menu__item:hover{
background:#EEF4FF !important;
color:var(--blue-2) !important;
}
.mobile-menu-heading{
display:block;
grid-column:1 / -1;
margin-top:8px;
color:var(--blue-2);
font-size:12px;
font-weight:950;
letter-spacing:.08em;
text-transform:uppercase;
}
@media (max-width:1180px){
.main-nav{gap:14px !important;font-size:12.5px !important;}
.nav-dropdown--mega .nav-dropdown__panel{width:min(900px, calc(100vw - 36px));}
.mega-menu__grid--solutions{grid-template-columns:repeat(4, minmax(0, 1fr));}
}
@media (max-width:1040px){
.main-nav{gap:11px !important;font-size:12px !important;}
.header__cta{min-width:132px;padding-inline:16px;}
}
@media (max-width:900px){
.mobile-menu{max-height:calc(100vh - 70px);overflow:auto;}
.mobile-subitem{padding-left:18px !important;}
}
@media (max-width:420px){
.mobile-menu{max-height:calc(100vh - 66px);}
}
/* MEGA MENU POSITION HARDENING */
@media (min-width:901px){
.nav-dropdown--mega::before{
content:"";
position:absolute;
left:-36px;
right:-36px;
top:100%;
height:24px;
}
.nav-dropdown--mega .nav-dropdown__panel{
position:fixed;
left:50vw;
top:84px;
transform:translate(-50%, 10px);
}
.nav-dropdown--mega:hover .nav-dropdown__panel,
.nav-dropdown--mega:focus-within .nav-dropdown__panel{
transform:translate(-50%, 0);
}
}
/* VISUAL CARD MEGA MENU UPDATE — light, structured mega-menu with sliced images from approved mockup */
@media (min-width:901px){
.nav-dropdown--mega .nav-dropdown__panel.mega-menu--visual{
position:fixed !important;
left:50vw !important;
top:84px !important;
width:min(1480px, calc(100vw - 42px)) !important;
min-width:0 !important;
padding:0 !important;
overflow:hidden;
border:1px solid #d9e4f2 !important;
border-radius:18px !important;
background:#ffffff !important;
box-shadow:0 20px 56px rgba(27,54,98,.16), 0 4px 18px rgba(27,54,98,.08) !important;
backdrop-filter:blur(12px);
transform:translate(-50%, 10px) !important;
}
.nav-dropdown--mega:hover .nav-dropdown__panel.mega-menu--visual,
.nav-dropdown--mega:focus-within .nav-dropdown__panel.mega-menu--visual{
transform:translate(-50%, 0) !important;
}
}
.mega-menu--visual{
color:#173057;
text-transform:none;
line-height:1.25;
}
.mega-menu__topline{
display:grid;
grid-template-columns:auto 1fr auto;
align-items:center;
gap:16px;
padding:22px 22px 14px;
border-bottom:1px solid #e7eef8;
background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.mega-menu__topline span{
display:inline-flex;
align-items:center;
gap:12px;
color:#0f57e6;
font-size:19px;
font-weight:950;
letter-spacing:.01em;
}
.mega-menu__topline span::before{
content:"";
width:22px;
height:22px;
border-radius:999px;
border:3px solid #0f57e6;
box-shadow:0 0 0 4px rgba(15,87,230,.08);
}
.nav-dropdown--products .mega-menu__topline span::before{
border-radius:6px;
border-width:2px;
}
.mega-menu__topline small{
color:#526683;
font-size:14px;
font-weight:600;
}
.mega-menu__topline a{
display:inline-flex !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#0f57e6 !important;
font-size:13px;
font-weight:900;
letter-spacing:.02em;
text-transform:none;
white-space:nowrap !important;
}
.mega-menu__cards{
display:grid;
gap:14px;
padding:16px 16px 18px;
align-items:stretch;
}
.mega-menu__cards--solutions,
.mega-menu__cards--products{
grid-template-columns:repeat(5, minmax(0, 1fr));
grid-auto-rows:1fr;
}
.mega-menu__cards--solutions .mega-card--cta,
.mega-menu__cards--products .mega-card--cta{
grid-column:5;
grid-row:1 / span 2;
}
.mega-menu__cards--solutions .mega-card:nth-child(7){
grid-column:3 / span 2;
}
.mega-card{
position:relative;
display:flex !important;
min-height:286px;
flex-direction:column;
padding:10px 12px 34px !important;
border:1px solid #e3eaf4;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff,#fcfdff) !important;
color:#173057 !important;
white-space:normal !important;
overflow:hidden;
transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease, background .22s ease;
box-shadow:0 3px 12px rgba(27,54,98,.04);
}
.mega-card:hover,
.mega-card:focus-visible{
background:#ffffff !important;
border-color:#bfd3ef !important;
color:#0e2448 !important;
transform:translateY(-2px);
box-shadow:0 14px 34px rgba(27,54,98,.12);
}
.mega-card__media{
display:block;
height:144px;
margin:0 0 14px;
border-radius:12px;
overflow:hidden;
background:#eef4fb;
border:1px solid #e3ebf6;
}
.mega-card__media img{
width:100%;
height:100%;
object-fit:cover;
display:block;
transition:transform .28s ease, filter .28s ease;
}
.mega-card:hover .mega-card__media img,
.mega-card:focus-visible .mega-card__media img{
transform:scale(1.035);
filter:saturate(1.02) contrast(1.02);
}
.mega-card strong{
display:block;
margin:0 0 8px;
color:#152b52;
font-size:15px;
line-height:1.16;
font-weight:900;
letter-spacing:-.03em;
}
.mega-card span:not(.mega-card__media){
display:block;
color:#4c5f7e;
font-size:12.8px;
line-height:1.43;
font-weight:560;
}
.mega-card em{
position:absolute;
right:14px;
bottom:12px;
color:#1c67ff;
font-style:normal;
font-size:21px;
line-height:1;
}
.mega-card--cta{
background:linear-gradient(180deg,#f7fbff,#eef5ff) !important;
border-color:#cadcf9 !important;
justify-content:flex-start;
}
.mega-card--cta strong{
font-size:16px;
}
.mega-card--cta span:not(.mega-card__media){
color:#435a7a;
}
.mega-card--cta::after{
content:"";
position:absolute;
inset:auto 14px 12px 14px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg,#0f57e6,#ffce3a);
opacity:.9;
}
@media (max-width:1380px) and (min-width:1181px){
.nav-dropdown--mega .nav-dropdown__panel.mega-menu--visual{
width:min(1320px, calc(100vw - 32px)) !important;
}
.mega-card{min-height:272px;}
.mega-card__media{height:132px;}
}
@media (max-width:1180px) and (min-width:901px){
.nav-dropdown--mega .nav-dropdown__panel.mega-menu--visual{
width:min(1120px, calc(100vw - 24px)) !important;
}
.mega-menu__cards--solutions,
.mega-menu__cards--products{
grid-template-columns:repeat(4, minmax(0, 1fr));
}
.mega-menu__cards--solutions .mega-card:nth-child(7),
.mega-menu__cards--solutions .mega-card--cta,
.mega-menu__cards--products .mega-card--cta{
grid-column:auto;
grid-row:auto;
}
.mega-card{min-height:256px;}
.mega-card__media{height:118px;}
}
@media (max-width:900px){
.mega-menu--visual{display:none;}
}
/* END VISUAL CARD MEGA MENU UPDATE */
/* TABLET / MOBILE NAVIGATION UPDATE — burger drawer with image cards */
@media (max-width:1180px){
.main-nav{display:none !important;}
.burger{display:flex !important;}
.header__inner{height:72px;}
.header__cta{margin-left:auto;}
.nav-dropdown--mega .nav-dropdown__panel.mega-menu--visual{display:none !important;}
.mobile-menu{
position:absolute; left:0; right:0; top:72px;
display:none !important;
max-height:calc(100vh - 72px);
overflow:auto;
padding:18px 24px 24px;
background:rgba(255,255,255,.985);
border-bottom:1px solid var(--border);
box-shadow:0 26px 46px rgba(15,23,42,.12);
z-index:39; font-weight:800;
}
.mobile-menu.is-open{display:block !important;}
.mobile-menu__toplink,
.mobile-menu__cta,
.mobile-accordion__toggle{
width:100%; min-height:50px; display:flex; align-items:center; justify-content:space-between;
border:1px solid #e2eaf6; border-radius:14px; background:#fff; color:#102243;
padding:0 16px; font-size:13px; font-weight:900; letter-spacing:.02em; text-transform:uppercase;
box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.mobile-menu__toplink + .mobile-accordion,
.mobile-accordion + .mobile-accordion,
.mobile-accordion + .mobile-menu__toplink,
.mobile-menu__toplink + .mobile-menu__toplink,
.mobile-menu__toplink + .mobile-menu__cta{margin-top:10px;}
.mobile-menu__cta{
margin-top:12px; justify-content:center; border-color:transparent;
background:var(--gradient-primary); color:#fff; box-shadow:0 12px 28px rgba(37,83,232,.20);
}
.mobile-accordion{margin-top:10px;}
.mobile-accordion__toggle{cursor:pointer;}
.mobile-accordion__toggle i{
width:9px; height:9px; border-right:2px solid #2553E8; border-bottom:2px solid #2553E8;
transform:rotate(45deg); transition:transform .18s ease; margin-left:14px;
}
.mobile-accordion.is-open .mobile-accordion__toggle{border-color:#c8daf6; color:#0f57e6; background:#f8fbff;}
.mobile-accordion.is-open .mobile-accordion__toggle i{transform:rotate(-135deg);}
.mobile-accordion__panel{
display:none; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; padding:12px 0 4px;
}
.mobile-accordion.is-open .mobile-accordion__panel{display:grid;}
.mobile-card-link{
min-height:246px; display:grid; grid-template-columns:1fr; grid-template-rows:112px auto;
gap:10px; align-content:start; border:1px solid #e4ebf6; border-radius:16px;
background:linear-gradient(180deg,#fff,#fbfdff); padding:10px;
box-shadow:0 4px 14px rgba(15,23,42,.04); position:relative; overflow:hidden;
}
.mobile-card-link__thumb{
display:block; border-radius:12px; overflow:hidden; background:#eef4fb; border:1px solid #e3ebf6; height:112px;
}
.mobile-card-link__thumb img{display:block; width:100%; height:100%; object-fit:cover;}
.mobile-card-link__body{display:block; padding-right:22px;}
.mobile-card-link strong{
display:block; color:#102243; font-size:13px; line-height:1.2; font-weight:900; letter-spacing:-.015em; margin:0 0 5px;
}
.mobile-card-link__body > span{
display:block; color:#5c6e88; font-size:12px; line-height:1.35; font-weight:600;
}
.mobile-card-link em{
position:absolute; right:12px; bottom:10px; color:#1c67ff; font-style:normal; font-size:18px; line-height:1;
}
.mobile-card-link--cta{background:linear-gradient(180deg,#f7fbff,#eef5ff); border-color:#cadcf9;}
.mobile-card-link--cta::after{
content:""; position:absolute; left:12px; right:12px; bottom:0; height:3px; border-radius:999px;
background:linear-gradient(90deg,#0f57e6,#ffce3a);
}
}
@media (max-width:640px){
.header__inner{height:66px;} .brand-video{max-width:160px;} .header__cta{display:none !important;}
.mobile-menu{top:66px; max-height:calc(100vh - 66px); padding:14px 16px 20px;}
.mobile-accordion__panel{grid-template-columns:1fr; gap:8px;}
.mobile-card-link{
min-height:auto; grid-template-columns:72px 1fr 16px; grid-template-rows:auto; align-items:center; gap:10px; padding:10px;
}
.mobile-card-link__thumb{width:72px; height:56px;}
.mobile-card-link__body{padding-right:0;}
.mobile-card-link em{position:static; justify-self:end; align-self:center; font-size:17px;}
.mobile-menu__toplink,
.mobile-menu__cta,
.mobile-accordion__toggle{min-height:46px; border-radius:13px; padding-inline:14px;}
}
@media (max-width:420px){
.mobile-menu{padding-inline:12px;}
.mobile-card-link strong{font-size:12.5px;}
.mobile-card-link__body > span{font-size:11.5px;}
.mobile-card-link{grid-template-columns:64px 1fr 14px; padding:9px;}
.mobile-card-link__thumb{width:64px; height:52px;}
}
/* END TABLET / MOBILE NAVIGATION UPDATE */
/* CLEAN SYSTEM MEGA MENU — compact, not sitemap */
.mega-menu--clean { max-width: 1120px; }
.mega-menu__cards--system-clean { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mega-card--group { align-items: stretch; min-height: 0; padding-bottom: 18px; }
.mega-card--group .mega-card__media { height: 104px; }
.mega-group-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 7px; }
.mega-group-list li { margin: 0; padding: 0; }
.mega-group-list a { color: var(--muted); font-weight: 700; font-size: 14px; line-height: 1.25; text-decoration: none; }
.mega-group-list a:hover { color: var(--blue); }
.mobile-accordion__panel--clean { gap: 14px; }
.mobile-menu-group { display: grid; gap: 8px; padding: 10px 0 12px; border-bottom: 1px solid rgba(16, 30, 61, .08); }
.mobile-menu-group__title { font-size: 12px; font-weight: 900; color: var(--blue); text-transform: uppercase; letter-spacing: .04em; }
.mobile-menu__subitem { display: block; padding: 7px 0; font-weight: 800; color: var(--text); text-decoration: none; }
@media (max-width: 1100px) { .mega-menu__cards--system-clean { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .mega-menu__cards--system-clean { grid-template-columns: 1fr; } }
/* INDUSTRIES MEGA MENU UPDATE */
.nav-dropdown--industries .mega-menu__topline span::before{
border-radius:7px;
border-width:2px;
box-shadow:0 0 0 4px rgba(15,87,230,.08);
}
.mega-menu--industries{max-width:1180px;}
.mega-menu__cards--industries-clean{
grid-template-columns:repeat(4, minmax(0, 1fr));
gap:16px;
}
.mega-card--industry{
min-height:0;
padding:18px 18px 20px !important;
}
.mega-card--industry > strong{
margin-bottom:12px;
font-size:15.5px;
}
.mega-group-list--rich{
gap:8px;
margin-top:0;
}
.mega-group-list--rich a{
display:block !important;
padding:9px 9px !important;
border-radius:11px !important;
white-space:normal !important;
}
.mega-group-list--rich a strong{
display:block;
margin:0 0 3px;
color:#102243;
font-size:13.5px;
line-height:1.18;
font-weight:900;
letter-spacing:-.015em;
}
.mega-group-list--rich a span{
display:block;
color:#61718a;
font-size:11.8px;
line-height:1.28;
font-weight:600;
}
.mega-group-list--rich a:hover{
background:#eef4ff;
}
.mobile-accordion__panel--industries{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
.mobile-menu__subitem--rich strong{
display:block;
color:#102243;
font-size:13px;
line-height:1.2;
}
.mobile-menu__subitem--rich span{
display:block;
margin-top:3px;
color:#61718a;
font-size:12px;
line-height:1.3;
font-weight:600;
}
.industries-grid .card h3{min-height:48px;}
.section--soft{background:linear-gradient(135deg,#f8fbff 0%,#ffffff 48%,#eef4ff 100%);}
.callout{
padding:34px;
border:1px solid #e2eaf6;
border-radius:24px;
background:linear-gradient(135deg,#ffffff 0%,#f8fbff 100%);
box-shadow:0 16px 44px rgba(15,23,42,.06);
}
.callout h2{margin:0 0 12px;}
.callout p{max-width:900px;margin:0 0 22px;color:var(--muted);font-weight:600;line-height:1.55;}
@media (max-width:1180px) and (min-width:901px){
.mega-menu__cards--industries-clean{grid-template-columns:repeat(2, minmax(0, 1fr));}
}
@media (max-width:640px){
.mobile-accordion__panel--industries{grid-template-columns:1fr;}
.callout{padding:24px 20px;border-radius:18px;}
}
/* END INDUSTRIES MEGA MENU UPDATE */
/* INDUSTRIES MENU FIX — compact sector navigation, not a page inside the menu */
.mega-menu--industries-simple{
max-width: 980px !important;
padding-bottom: 18px !important;
}
.mega-menu__topline--compact{
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 18px !important;
padding-bottom: 14px !important;
margin-bottom: 14px !important;
}
.industry-menu-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 22px;
}
.industry-menu-col{
padding: 2px 0 0;
}
.industry-menu-title{
margin-bottom: 10px;
color: var(--blue);
font-size: 12px;
font-weight: 900;
line-height: 1.2;
letter-spacing: .04em;
text-transform: uppercase;
}
.industry-menu-list{
list-style: none;
display: grid;
gap: 7px;
margin: 0;
padding: 0;
}
.industry-menu-list a{
display: block;
padding: 7px 0;
color: #172442;
font-size: 14px;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
white-space: normal;
}
.industry-menu-list a:hover{
color: var(--blue);
}
.industry-menu-footer{
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(16, 30, 61, .10);
}
.industry-menu-footer a{
color: var(--blue);
font-size: 13px;
font-weight: 900;
text-decoration: none;
}
.mobile-accordion__panel--industries-simple{
display: grid;
grid-template-columns: 1fr !important;
}
.mobile-accordion__panel--industries-simple .mobile-menu__subitem{
padding: 8px 0;
}
.mobile-menu-group--final{
border-bottom: 0;
}
.mobile-menu__subitem--all{
color: var(--blue) !important;
}
@media (max-width: 1100px){
.industry-menu-grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media (max-width: 760px){
.industry-menu-grid{grid-template-columns: 1fr;}
.mega-menu__topline--compact{grid-template-columns: 1fr !important;}
.industry-menu-footer{flex-direction: column;}
}
/* END INDUSTRIES MENU FIX */
/* INDUSTRIES MENU REWORK — expanded sector navigation, no service mixing */
.mega-menu--industries-wide{max-width:1160px !important;}
.mega-menu--industries-wide .mega-menu__topline small{font-weight:800;color:#61718a;}
.industry-menu-grid--wide{grid-template-columns:repeat(4, minmax(0, 1fr));gap:20px;}
.industry-menu-grid--wide .industry-menu-list{gap:5px;}
.industry-menu-grid--wide .industry-menu-list a{font-size:13.5px;line-height:1.22;padding:6px 0;}
.industries-grid--expanded .card h3{min-height:58px;}
@media (max-width:1180px){.industry-menu-grid--wide{grid-template-columns:repeat(2, minmax(0, 1fr));}}
@media (max-width:760px){.industry-menu-grid--wide{grid-template-columns:1fr;}}
/* END INDUSTRIES MENU REWORK */
/* INDUSTRIES MENU FINAL — 8 key entries in navigation, full catalog on industries page */
.mega-menu--industries-core{
max-width: 760px !important;
padding-bottom: 18px !important;
}
.industry-menu-grid--core{
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 28px !important;
}
.industry-menu-grid--core .industry-menu-list{
gap: 6px !important;
}
.industry-menu-grid--core .industry-menu-list a{
font-size: 14px !important;
line-height: 1.25 !important;
padding: 7px 0 !important;
}
.mobile-accordion__panel--industries-core{
grid-template-columns: 1fr !important;
}
.mobile-menu-group--core-industries{
border-bottom: 1px solid rgba(16, 30, 61, .08);
}
@media (max-width: 760px){
.industry-menu-grid--core{grid-template-columns: 1fr !important;}
}
/* END INDUSTRIES MENU FINAL */
/* INDUSTRIES MENU CLUSTERED — 4 visual groups with 4–6 sectors each */
.mega-menu--industries-clustered{
max-width: 1180px !important;
padding-bottom: 18px !important;
}
.mega-menu__cards--industry-clusters{
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 16px;
}
.mega-card--industry-cluster{
min-height: 0;
padding-bottom: 18px !important;
}
.mega-card--industry-cluster .mega-card__media{
height: 108px;
}
.mega-card--industry-cluster > strong{
margin-bottom: 8px;
font-size: 15px;
}
.mega-card--industry-cluster > span:not(.mega-card__media){
min-height: 36px;
margin-bottom: 12px;
color: #60718a;
font-size: 12px;
line-height: 1.35;
}
.industry-cluster-list{
margin-top: 0;
gap: 7px;
}
.industry-cluster-list a{
display: block;
padding: 5px 0;
color: #172442;
font-size: 13.5px;
font-weight: 800;
line-height: 1.25;
text-decoration: none;
}
.industry-cluster-list a:hover{
color: var(--blue);
}
.industry-menu-footer--clusters{
margin-top: 16px;
}
.mobile-accordion__panel--industries-clustered{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.mobile-menu-group--industry-section{
border-bottom: 0;
padding: 10px 0 6px;
}
.mobile-menu-group--industry-section .mobile-menu__subitem{
padding: 6px 0;
}
@media (max-width: 1180px){
.mega-menu__cards--industry-clusters{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 760px){
.mega-menu__cards--industry-clusters{
grid-template-columns: 1fr;
}
.mobile-accordion__panel--industries-clustered{
grid-template-columns: 1fr;
}
}
/* END INDUSTRIES MENU CLUSTERED */
/* CUSTOM INDUSTRY ART */
.mega-card--industry-cluster .mega-card__media{background:linear-gradient(180deg,#f6faff,#edf4ff);border-color:#dfe9f7;}
.mega-card--industry-cluster .mega-card__media img{object-fit:cover;}
/* END CUSTOM INDUSTRY ART */
/* INDUSTRY MENU RASTER VISUALS — not icons */
.mega-card--industry-cluster .mega-card__media{
height: 124px;
background: #eef4fb;
border-color: #d9e6f6;
}
.mega-card--industry-cluster .mega-card__media img{
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
}
.mega-card--industry-cluster:hover .mega-card__media img,
.mega-card--industry-cluster:focus-visible .mega-card__media img{
transform: scale(1.025);
}
/* END INDUSTRY MENU RASTER VISUALS */
/* INDUSTRIES MENU CTA + MISSING UX FIXES */
.mega-menu--industries-clustered .mega-menu__topline small{
color:#61718a;
font-weight:800;
}
.mega-card--industry-cluster .mega-card__media{
display:block;
text-decoration:none;
}
.mega-card__title-link{
display:block;
margin:0 0 8px;
color:#152b52;
font-size:15px;
line-height:1.16;
font-weight:900;
letter-spacing:-.03em;
text-decoration:none;
}
.mega-card__title-link:hover{
color:var(--blue);
}
.mega-card--industry-cluster > span:not(.mega-card__media){
color:#60718a;
font-weight:650;
}
.industry-cluster-list a{
font-weight:650 !important;
color:#31415f;
}
.industry-cluster-list a:hover{
color:var(--blue);
}
.industry-menu-footer--cta{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
margin-top:18px;
padding-top:16px;
border-top:1px solid rgba(16,30,61,.10);
}
.industry-menu-footer__note{
max-width:720px;
color:#61718a;
font-size:13px;
line-height:1.35;
font-weight:700;
}
.industry-menu-footer__button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 18px;
border-radius:12px;
background:var(--gradient-primary);
color:#fff !important;
font-size:13px;
line-height:1;
font-weight:900;
text-decoration:none;
box-shadow:0 10px 24px rgba(37,83,232,.20);
white-space:nowrap;
}
.industry-menu-footer__button:hover{
transform:translateY(-1px);
box-shadow:0 14px 30px rgba(37,83,232,.26);
}
.mobile-menu__note{
display:block;
margin:0 0 8px;
color:#61718a;
font-size:12.5px;
line-height:1.35;
font-weight:700;
}
.mobile-menu__cta-button{
display:flex;
align-items:center;
justify-content:center;
min-height:42px;
margin-top:8px;
border-radius:13px;
background:var(--gradient-primary);
color:#fff !important;
font-size:13px;
font-weight:900;
text-decoration:none;
box-shadow:0 10px 24px rgba(37,83,232,.20);
}
@media (max-width:760px){
.industry-menu-footer--cta{
align-items:flex-start;
flex-direction:column;
}
}
/* END INDUSTRIES MENU CTA + MISSING UX FIXES */
/* INDUSTRIES MENU CTA FIX — compact bottom strip, no overlap with page hero buttons */
.nav-dropdown--industries .nav-dropdown__panel{
z-index: 9999 !important;
}
.mega-menu--industries-clustered{
overflow: hidden !important;
background: #fff !important;
}
.mega-menu--industries-clustered .mega-menu__cards--industry-clusters{
padding-bottom: 4px;
}
.mega-menu--industries-clustered .mega-card--industry-cluster{
padding-bottom: 14px !important;
}
.mega-menu--industries-clustered .mega-card--industry-cluster > span:not(.mega-card__media){
margin-bottom: 10px !important;
}
.industry-menu-footer--compact-cta{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:14px !important;
margin:14px 0 0 !important;
padding:12px 14px !important;
border:1px solid #dbe7fa !important;
border-radius:16px !important;
background:linear-gradient(90deg,#f7fbff 0%,#ffffff 58%,#eef4ff 100%) !important;
box-shadow:0 8px 20px rgba(15,23,42,.045) !important;
}
.industry-menu-footer--compact-cta .industry-menu-footer__note{
max-width:none !important;
color:#61718a !important;
font-size:13px !important;
line-height:1.35 !important;
font-weight:750 !important;
white-space:normal !important;
}
.industry-menu-footer--compact-cta .industry-menu-footer__button{
min-height:34px !important;
padding:0 16px !important;
border-radius:11px !important;
font-size:13px !important;
white-space:nowrap !important;
}
.mobile-menu-group--compact-cta{
padding:12px !important;
border:1px solid #dbe7fa !important;
border-radius:14px !important;
background:#f8fbff !important;
}
.mobile-menu-group--compact-cta .mobile-menu__note{
margin-bottom:6px !important;
}
.mobile-menu-group--compact-cta .mobile-menu__cta-button{
min-height:38px !important;
}
@media (max-width:760px){
.industry-menu-footer--compact-cta{
align-items:flex-start !important;
flex-direction:column !important;
}
}
/* END INDUSTRIES MENU CTA FIX */
/* INDUSTRIES MEGA MENU REDESIGN — clean card navigation */
.nav-dropdown--industries{
position: static !important;
}
.nav-dropdown--industries .mega-menu--industries-redesign{
width: min(1180px, calc(100vw - 56px)) !important;
max-width: 1180px !important;
left: 50% !important;
transform: translateX(-50%) translateY(0) !important;
padding: 0 !important;
border: 1px solid #dbe6f6 !important;
border-radius: 22px !important;
background: #fff !important;
overflow: hidden !important;
box-shadow: 0 26px 70px rgba(12, 31, 70, .16) !important;
z-index: 10000 !important;
}
.industry-mega-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px 16px;
border-bottom:1px solid #e4edf8;
background:linear-gradient(90deg,#ffffff 0%,#f8fbff 60%,#eef4ff 100%);
}
.industry-mega-head__title{
display:flex;
align-items:baseline;
gap:18px;
min-width:0;
}
.industry-mega-head__title span{
color:#0f57e6;
font-size:20px;
line-height:1.05;
font-weight:900;
letter-spacing:-.03em;
text-transform:uppercase;
}
.industry-mega-head__title small{
color:#61718a;
font-size:14px;
line-height:1.25;
font-weight:750;
}
.industry-mega-head__all{
color:#0f57e6;
font-size:13px;
font-weight:900;
text-decoration:none;
white-space:nowrap;
}
.industry-mega-grid{
display:grid;
grid-template-columns:repeat(4, minmax(0,1fr));
gap:16px;
padding:18px 18px 16px;
background:#fff;
}
.industry-mega-card{
min-width:0;
padding:12px 12px 14px;
border:1px solid #dfe9f6;
border-radius:18px;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
box-shadow:0 8px 22px rgba(15,23,42,.045);
overflow:hidden;
}
.industry-mega-card:hover{
border-color:#bfd3ef;
box-shadow:0 14px 34px rgba(15,23,42,.09);
}
.industry-mega-card__image{
display:block;
height:96px;
margin:0 0 12px;
border:1px solid #d7e5f8;
border-radius:13px;
overflow:hidden;
background:#eef4fb;
text-decoration:none;
}
.industry-mega-card__image img{
display:block;
width:100%;
height:100%;
object-fit:cover;
object-position:center;
transition:transform .25s ease;
}
.industry-mega-card:hover .industry-mega-card__image img{
transform:scale(1.025);
}
.industry-mega-card__title{
display:block;
margin:0 0 10px;
color:#162a4b;
font-size:15px;
line-height:1.18;
font-weight:900;
letter-spacing:-.025em;
text-decoration:none;
}
.industry-mega-card__title:hover{
color:#0f57e6;
}
.industry-mega-card__list{
list-style:none;
display:grid;
gap:7px;
margin:0;
padding:0;
}
.industry-mega-card__list li{
min-width:0;
margin:0;
padding:0;
}
.industry-mega-card__list a{
display:block;
color:#34445f;
font-size:13px;
line-height:1.22;
font-weight:650;
text-decoration:none;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.industry-mega-card__list a:hover{
color:#0f57e6;
}
.industry-mega-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
margin:0 18px 18px;
padding:12px 14px;
border:1px solid #dbe7fa;
border-radius:16px;
background:linear-gradient(90deg,#f8fbff 0%,#ffffff 58%,#eef4ff 100%);
}
.industry-mega-bottom span{
color:#61718a;
font-size:13px;
line-height:1.35;
font-weight:750;
}
.industry-mega-bottom__button{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:34px;
padding:0 16px;
border-radius:11px;
background:var(--gradient-primary);
color:#fff !important;
font-size:13px;
font-weight:900;
text-decoration:none;
box-shadow:0 10px 24px rgba(37,83,232,.20);
white-space:nowrap;
}
.industry-mega-bottom__button:hover{
transform:translateY(-1px);
box-shadow:0 14px 30px rgba(37,83,232,.26);
}
.mobile-accordion--industries-redesign .mobile-accordion__panel--industry-redesign{
display:none;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:12px 0 4px;
}
.mobile-accordion--industries-redesign.is-open .mobile-accordion__panel--industry-redesign{
display:grid;
}
.mobile-industry-group{
display:grid;
gap:7px;
padding:12px;
border:1px solid #dfe9f6;
border-radius:14px;
background:#fff;
}
.mobile-industry-group__title{
margin-bottom:3px;
color:#0f57e6;
font-size:13px;
line-height:1.2;
font-weight:900;
text-decoration:none;
}
.mobile-industry-group__item{
color:#34445f;
font-size:12.5px;
line-height:1.25;
font-weight:700;
text-decoration:none;
}
.mobile-industry-cta{
display:grid;
gap:8px;
padding:12px;
border:1px solid #dbe7fa;
border-radius:14px;
background:#f8fbff;
}
.mobile-industry-cta span{
color:#61718a;
font-size:12.5px;
line-height:1.35;
font-weight:750;
}
.mobile-industry-cta a{
color:#0f57e6;
font-size:13px;
font-weight:900;
text-decoration:none;
}
.mobile-industry-cta__button{
display:flex;
align-items:center;
justify-content:center;
min-height:38px;
border-radius:12px;
background:var(--gradient-primary);
color:#fff !important;
box-shadow:0 10px 24px rgba(37,83,232,.20);
}
@media (max-width:1180px){
.nav-dropdown--industries .mega-menu--industries-redesign{display:none !important;}
}
@media (max-width:760px){
.mobile-accordion--industries-redesign .mobile-accordion__panel--industry-redesign{
grid-template-columns:1fr;
}
}
/* END INDUSTRIES MEGA MENU REDESIGN */
/* INDUSTRIES MEGA MENU LARGE IMAGES FIX */
.industry-mega-card__image{
height: 156px !important;
margin: 0 0 16px !important;
border-radius: 15px !important;
}
.industry-mega-card{
padding: 12px 12px 16px !important;
}
.industry-mega-card__title{
margin-bottom: 11px !important;
}
.industry-mega-grid{
gap: 18px !important;
padding: 20px 20px 16px !important;
}
.industry-mega-bottom{
margin: 0 20px 20px !important;
}
@media (max-width:1180px){
.industry-mega-card__image{
height: 132px !important;
}
}
@media (max-width:760px){
.industry-mega-card__image{
height: 150px !important;
}
}
/* END INDUSTRIES MEGA MENU LARGE IMAGES FIX */
/* DIAGNOSTIC CTA HOVER FIX IN INDUSTRIES MENU */
.industry-mega-bottom__button,
.industry-mega-bottom__button:link,
.industry-mega-bottom__button:visited{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:34px !important;
padding:0 16px !important;
border:1px solid transparent !important;
border-radius:11px !important;
background:var(--gradient-primary) !important;
color:#fff !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
box-shadow:0 10px 24px rgba(37,83,232,.20) !important;
white-space:nowrap !important;
transform:none !important;
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.industry-mega-bottom__button:hover,
.industry-mega-bottom__button:focus-visible{
background:var(--gradient-primary) !important;
color:#fff !important;
text-decoration:none !important;
transform:translateY(-1px) !important;
box-shadow:0 14px 30px rgba(37,83,232,.28) !important;
filter:saturate(1.06) brightness(1.02) !important;
outline:none !important;
}
.mobile-industry-cta__button,
.mobile-industry-cta__button:link,
.mobile-industry-cta__button:visited{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:38px !important;
border:1px solid transparent !important;
border-radius:12px !important;
background:var(--gradient-primary) !important;
color:#fff !important;
font-size:13px !important;
font-weight:900 !important;
text-decoration:none !important;
box-shadow:0 10px 24px rgba(37,83,232,.20) !important;
transition:transform .18s ease, box-shadow .18s ease, filter .18s ease !important;
}
.mobile-industry-cta__button:hover,
.mobile-industry-cta__button:focus-visible{
background:var(--gradient-primary) !important;
color:#fff !important;
text-decoration:none !important;
transform:translateY(-1px) !important;
box-shadow:0 14px 30px rgba(37,83,232,.28) !important;
filter:saturate(1.06) brightness(1.02) !important;
outline:none !important;
}
/* prevent generic dropdown/menu link hover styles from overriding diagnostic CTA */
.nav-dropdown--industries .mega-menu--industries-redesign a.industry-mega-bottom__button:hover,
.nav-dropdown--industries .mega-menu--industries-redesign a.industry-mega-bottom__button:focus-visible{
background:var(--gradient-primary) !important;
color:#fff !important;
}
/* END DIAGNOSTIC CTA HOVER FIX IN INDUSTRIES MENU */
/* TABLET + MOBILE INDUSTRIES MENU FIX */
@media (max-width:1180px){
.mobile-menu{
box-sizing:border-box !important;
}
.mobile-accordion--industries-redesign .mobile-accordion__panel--industry-cards{
display:none;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
padding:12px 0 6px;
}
.mobile-accordion--industries-redesign.is-open .mobile-accordion__panel--industry-cards{
display:grid;
}
.mobile-industry-intro{
grid-column:1/-1;
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:16px;
padding:12px 14px;
border:1px solid #dbe7fa;
border-radius:16px;
background:linear-gradient(90deg,#fff 0%,#f8fbff 62%,#eef4ff 100%);
}
.mobile-industry-intro strong{
color:#0f57e6;
font-size:15px;
line-height:1.15;
font-weight:900;
text-transform:uppercase;
letter-spacing:-.02em;
}
.mobile-industry-intro span{
color:#61718a;
font-size:12.5px;
line-height:1.25;
font-weight:750;
text-align:right;
}
.mobile-industry-card{
border:1px solid #dfe9f6;
border-radius:16px;
background:#fff;
overflow:hidden;
box-shadow:0 6px 18px rgba(15,23,42,.045);
}
.mobile-industry-card[open]{
border-color:#c8daf6;
box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.mobile-industry-card__summary{
display:grid;
grid-template-columns:112px 1fr 18px;
align-items:center;
gap:12px;
padding:10px;
cursor:pointer;
list-style:none;
min-height:86px;
}
.mobile-industry-card__summary::-webkit-details-marker{
display:none;
}
.mobile-industry-card__media{
display:block;
height:72px;
border:1px solid #d7e5f8;
border-radius:12px;
overflow:hidden;
background:#eef4fb;
}
.mobile-industry-card__media img{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.mobile-industry-card__body{
display:grid;
gap:4px;
min-width:0;
}
.mobile-industry-card__body strong{
color:#162a4b;
font-size:13.5px;
line-height:1.18;
font-weight:900;
letter-spacing:-.015em;
}
.mobile-industry-card__body small{
color:#61718a;
font-size:11.5px;
line-height:1.2;
font-weight:750;
}
.mobile-industry-card__arrow{
width:9px;
height:9px;
border-right:2px solid #2553e8;
border-bottom:2px solid #2553e8;
transform:rotate(45deg);
transition:transform .18s ease;
justify-self:center;
}
.mobile-industry-card[open] .mobile-industry-card__arrow{
transform:rotate(-135deg);
}
.mobile-industry-card__links{
display:grid;
gap:0;
padding:0 12px 12px 134px;
}
.mobile-industry-card__links a{
display:block;
padding:7px 0;
color:#34445f;
font-size:12.8px;
line-height:1.22;
font-weight:700;
text-decoration:none;
border-top:1px solid rgba(16,30,61,.07);
}
.mobile-industry-card__links a:hover{
color:#0f57e6;
}
.mobile-industry-cta--cards{
grid-column:1/-1;
display:grid;
grid-template-columns:1fr auto auto;
align-items:center;
gap:12px;
padding:12px 14px;
border:1px solid #dbe7fa;
border-radius:16px;
background:linear-gradient(90deg,#f8fbff 0%,#fff 60%,#eef4ff 100%);
}
.mobile-industry-cta--cards span{
color:#61718a;
font-size:12.8px;
line-height:1.35;
font-weight:750;
}
.mobile-industry-cta--cards > a:not(.mobile-industry-cta__button){
color:#0f57e6;
font-size:13px;
font-weight:900;
text-decoration:none;
white-space:nowrap;
}
.mobile-industry-cta--cards .mobile-industry-cta__button,
.mobile-industry-cta--cards .mobile-industry-cta__button:link,
.mobile-industry-cta--cards .mobile-industry-cta__button:visited{
display:flex !important;
align-items:center !important;
justify-content:center !important;
min-height:38px !important;
padding:0 16px !important;
border-radius:12px !important;
background:var(--gradient-primary) !important;
color:#fff !important;
font-size:14px !important;
font-weight:900 !important;
text-decoration:none !important;
box-shadow:0 10px 24px rgba(37,83,232,.20) !important;
white-space:nowrap;
}
}
@media (min-width:641px) and (max-width:1180px){
.mobile-menu{
left:24px !important;
right:24px !important;
width:auto !important;
border:1px solid #dbe7fa !important;
border-top:0 !important;
border-radius:0 0 22px 22px !important;
}
}
@media (max-width:640px){
.mobile-accordion--industries-redesign .mobile-accordion__panel--industry-cards{
grid-template-columns:1fr;
gap:9px;
}
.mobile-industry-intro{
align-items:flex-start;
flex-direction:column;
gap:4px;
padding:10px 12px;
}
.mobile-industry-intro strong{
font-size:13.5px;
}
.mobile-industry-intro span{
text-align:left;
font-size:12px;
}
.mobile-industry-card__summary{
grid-template-columns:86px 1fr 16px;
gap:10px;
min-height:72px;
padding:9px;
}
.mobile-industry-card__media{
height:58px;
border-radius:10px;
}
.mobile-industry-card__body strong{
font-size:12.8px;
}
.mobile-industry-card__body small{
font-size:11px;
}
.mobile-industry-card__links{
padding:0 11px 10px 105px;
}
.mobile-industry-card__links a{
padding:6px 0;
font-size:12.2px;
}
.mobile-industry-cta--cards{
grid-template-columns:1fr;
gap:8px;
padding:11px 12px;
}
.mobile-industry-cta--cards .mobile-industry-cta__button{
width:100%;
}
}
@media (max-width:420px){
.mobile-industry-card__summary{
grid-template-columns:74px 1fr 14px;
}
.mobile-industry-card__media{
height:52px;
}
.mobile-industry-card__links{
padding-left:94px;
}
}
/* END TABLET + MOBILE INDUSTRIES MENU FIX */
/* SAFARI TRANSPARENT LOGO FIX */
.brand-logo-apng{
display:block !important;
background:transparent !important;
mix-blend-mode:normal !important;
isolation:auto !important;
}
.brand,
.footer__brand{
background:transparent !important;
}
/* END SAFARI TRANSPARENT LOGO FIX */
/* SERVICES MENU UPDATE — scoped to services dropdown */
.nav-dropdown--services .mega-menu--services-clean{max-width:1320px;}
.nav-dropdown--services .mega-menu__cards--services-clean{grid-template-columns:repeat(3, minmax(0, 1fr));gap:12px;padding:14px 16px 16px;}
.nav-dropdown--services .mega-card--services-group{min-height:0;padding:14px 14px 16px !important;}
.nav-dropdown--services .mega-card--services-group strong{margin-bottom:10px;font-size:14px;}
.nav-dropdown--services .mega-card--services-group .mega-group-list{margin-top:0;gap:6px;}
.nav-dropdown--services .mega-card--services-group .mega-group-list a{font-size:13px;line-height:1.22;}
.mobile-accordion__panel--services{grid-template-columns:repeat(2, minmax(0,1fr));}
.mobile-menu-group--services{align-content:start;}
@media (max-width:1180px) and (min-width:901px){.nav-dropdown--services .mega-menu__cards--services-clean{grid-template-columns:repeat(3, minmax(0,1fr));}}
@media (max-width:900px){.mobile-accordion__panel--services{grid-template-columns:repeat(2, minmax(0,1fr));}}
@media (max-width:640px){.mobile-accordion__panel--services{grid-template-columns:1fr;}}
/* END SERVICES MENU UPDATE */
/* Services menu category images — full-card placement, no crop */
.nav-dropdown--services .mega-menu--services-clean{max-width:1340px;}
.nav-dropdown--services .mega-menu__cards--services-clean{gap:14px;padding:14px 16px 18px;}
.nav-dropdown--services .mega-card--services-group{
display:grid !important;
grid-template-columns:minmax(0,1fr) 162px;
grid-template-rows:auto 1fr;
column-gap:14px;
row-gap:8px;
align-items:start;
min-height:0;
overflow:hidden;
padding:14px 14px 16px !important;
background:
radial-gradient(circle at 84% 20%,rgba(37,83,232,.08),transparent 34%),
linear-gradient(180deg,#fff 0%,#f8fbff 100%) !important;
}
.nav-dropdown--services .services-mega-card__media{
grid-column:2;
grid-row:1 / span 2;
align-self:start;
justify-self:end;
display:flex;
align-items:center;
justify-content:center;
width:162px;
aspect-ratio:3/2;
margin:0;
border-radius:16px;
overflow:visible;
background:linear-gradient(135deg,rgba(255,255,255,.96) 0%,rgba(238,244,255,.74) 100%);
box-shadow:inset 0 0 0 1px rgba(37,83,232,.08),0 10px 22px rgba(15,23,42,.06);
}
.nav-dropdown--services .services-mega-card__media img{
display:block;
width:100%;
height:auto;
aspect-ratio:3/2;
object-fit:contain;
object-position:center;
border-radius:14px;
}
.nav-dropdown--services .mega-card--services-group strong{
grid-column:1;
display:block;
margin:0 0 2px;
font-size:14px;
line-height:1.22;
}
.nav-dropdown--services .mega-card--services-group .mega-group-list{
grid-column:1;
margin:0;
gap:6px;
}
@media (max-width:1180px) and (min-width:901px){
.nav-dropdown--services .mega-card--services-group{grid-template-columns:minmax(0,1fr) 132px;column-gap:10px;padding:12px 12px 14px !important;}
.nav-dropdown--services .services-mega-card__media{width:132px;border-radius:14px;}
}
/* /Services menu category images */
/* SERVICES MENU V4 FROM SCRATCH — desktop-only, no number slots, no placeholder elements */
@media (min-width:1181px){
.nav-dropdown--services{position:static !important;}
.nav-dropdown--services .mega-menu--services-v4{
width:min(1240px, calc(100vw - 64px)) !important;
max-width:1240px !important;
left:50% !important;
top:84px !important;
transform:translateX(-50%) translateY(10px) !important;
padding:0 !important;
border:1px solid #dbe6f6 !important;
border-radius:24px !important;
background:#fff !important;
overflow:hidden !important;
box-shadow:0 28px 74px rgba(12,31,70,.16),0 4px 18px rgba(27,54,98,.07) !important;
z-index:10000 !important;
}
.nav-dropdown--services:hover .mega-menu--services-v4,
.nav-dropdown--services:focus-within .mega-menu--services-v4{
transform:translateX(-50%) translateY(0) !important;
}
.services-v4-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
padding:18px 22px 16px;
border-bottom:1px solid #e4edf8;
background:linear-gradient(90deg,#ffffff 0%,#f8fbff 58%,#eef4ff 100%);
}
.services-v4-head__title{
display:grid;
gap:4px;
min-width:0;
}
.services-v4-head__title span{
color:#0f57e6;
font-size:22px;
line-height:1.05;
font-weight:950;
letter-spacing:-.03em;
text-transform:uppercase;
}
.services-v4-head__title small{
color:#61718a;
font-size:15px;
line-height:1.28;
font-weight:750;
}
.services-v4-head__cta{
display:inline-flex !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#0f57e6 !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1 !important;
text-transform:none !important;
white-space:nowrap !important;
}
.services-v4-layout{
display:grid;
grid-template-columns:minmax(0,1fr) 350px;
gap:18px;
padding:18px;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
}
.services-v4-groups{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px;
align-content:start;
}
.services-v4-card{
min-width:0;
min-height:112px;
display:flex;
flex-direction:column;
padding:15px 15px 14px;
border-left:1px solid #dfe9f6;
border-right:1px solid #dfe9f6;
border-top:0;
border-bottom:0;
border-radius:16px;
background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
box-shadow:0 8px 22px rgba(15,23,42,.025);
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.services-v4-card:hover,
.services-v4-card:focus-within{
border-left-color:#b9cdf1;
border-right-color:#b9cdf1;
box-shadow:0 14px 34px rgba(15,23,42,.06);
background:linear-gradient(135deg,#ffffff 0%,#f7fbff 62%,#eef4ff 100%);
transform:translateY(-1px);
}
.services-v4-card__title{
display:block !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#162a4b !important;
text-transform:none !important;
font-size:16px !important;
line-height:1.18 !important;
font-weight:950 !important;
letter-spacing:-.025em !important;
}
.services-v4-card:hover .services-v4-card__title,
.services-v4-card:focus-within .services-v4-card__title{
color:#0f57e6 !important;
}
.services-v4-card p{display:none;}
.services-v4-card__links{
display:flex;
flex-wrap:wrap;
gap:6px 10px;
margin-top:auto;
padding-top:11px;
}
.services-v4-card__links a{
display:inline-flex !important;
padding:0 !important;
border-radius:0 !important;
background:transparent !important;
color:#61718a !important;
font-size:13px !important;
line-height:1.22 !important;
font-weight:800 !important;
text-transform:none !important;
white-space:nowrap;
}
.services-v4-card__links a:hover,
.services-v4-card__links a:focus-visible{
color:#0f57e6 !important;
}
.services-v4-preview{
position:relative;
min-width:0;
display:flex;
flex-direction:column;
align-self:stretch;
padding:14px;
border:1px solid #dfe9f6;
border-radius:20px;
background:
radial-gradient(circle at 78% 18%,rgba(255,202,71,.22),transparent 30%),
linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
box-shadow:0 14px 34px rgba(15,23,42,.06);
overflow:hidden;
}
.services-v4-preview::after{
content:"";
position:absolute;
inset:auto -25% -42% -25%;
height:170px;
background:radial-gradient(ellipse at center,rgba(37,83,232,.12),transparent 62%);
pointer-events:none;
}
.services-v4-preview__media{
position:relative;
height:250px;
border:1px solid #d7e5f8;
border-radius:16px;
background:linear-gradient(135deg,#f8fbff 0%,#ffffff 54%,#eef4ff 100%);
overflow:hidden;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.74),0 12px 24px rgba(15,23,42,.055);
}
.services-v4-preview__image{
position:absolute;
inset:0;
width:100%;
height:100%;
padding:10px;
object-fit:contain;
object-position:center;
opacity:0;
transform:scale(.985);
transition:opacity .18s ease, transform .18s ease;
}
.services-v4-preview__image--management{opacity:1;transform:scale(1);}
.services-v4-preview__copy{
position:relative;
min-height:112px;
margin-top:14px;
z-index:1;
}
.services-v4-preview__caption{
position:absolute;
inset:0;
opacity:0;
transform:translateY(3px);
transition:opacity .18s ease, transform .18s ease;
}
.services-v4-preview__caption--management{opacity:1;transform:translateY(0);}
.services-v4-preview__caption strong{
display:block;
color:#162a4b;
font-size:19px;
line-height:1.16;
font-weight:950;
letter-spacing:-.03em;
text-transform:none;
margin-bottom:8px;
}
.services-v4-preview__caption span{
display:block;
color:#61718a;
font-size:14.2px;
line-height:1.46;
font-weight:700;
text-transform:none;
}
.services-v4-preview__cta{
position:relative;
z-index:1;
margin-top:auto;
display:flex !important;
align-items:center;
justify-content:center;
min-height:44px;
padding:0 16px !important;
border-radius:12px !important;
background:linear-gradient(135deg,#2553E8 0%,#4f46e5 100%) !important;
color:#fff !important;
font-size:13px !important;
line-height:1 !important;
font-weight:900 !important;
text-transform:none !important;
box-shadow:0 14px 28px rgba(37,83,232,.18);
}
.mega-menu--services-v4:has(.services-v4-card:hover) .services-v4-preview__image--management,
.mega-menu--services-v4:has(.services-v4-card:focus-within) .services-v4-preview__image--management,
.mega-menu--services-v4:has(.services-v4-card:hover) .services-v4-preview__caption--management,
.mega-menu--services-v4:has(.services-v4-card:focus-within) .services-v4-preview__caption--management{
opacity:0;
}
.mega-menu--services-v4:has(.services-v4-card--management:hover) .services-v4-preview__image--management,
.mega-menu--services-v4:has(.services-v4-card--management:focus-within) .services-v4-preview__image--management,
.mega-menu--services-v4:has(.services-v4-card--management:hover) .services-v4-preview__caption--management,
.mega-menu--services-v4:has(.services-v4-card--management:focus-within) .services-v4-preview__caption--management,
.mega-menu--services-v4:has(.services-v4-card--strategy:hover) .services-v4-preview__image--strategy,
.mega-menu--services-v4:has(.services-v4-card--strategy:focus-within) .services-v4-preview__image--strategy,
.mega-menu--services-v4:has(.services-v4-card--strategy:hover) .services-v4-preview__caption--strategy,
.mega-menu--services-v4:has(.services-v4-card--strategy:focus-within) .services-v4-preview__caption--strategy,
.mega-menu--services-v4:has(.services-v4-card--operations:hover) .services-v4-preview__image--operations,
.mega-menu--services-v4:has(.services-v4-card--operations:focus-within) .services-v4-preview__image--operations,
.mega-menu--services-v4:has(.services-v4-card--operations:hover) .services-v4-preview__caption--operations,
.mega-menu--services-v4:has(.services-v4-card--operations:focus-within) .services-v4-preview__caption--operations,
.mega-menu--services-v4:has(.services-v4-card--finance:hover) .services-v4-preview__image--finance,
.mega-menu--services-v4:has(.services-v4-card--finance:focus-within) .services-v4-preview__image--finance,
.mega-menu--services-v4:has(.services-v4-card--finance:hover) .services-v4-preview__caption--finance,
.mega-menu--services-v4:has(.services-v4-card--finance:focus-within) .services-v4-preview__caption--finance,
.mega-menu--services-v4:has(.services-v4-card--commercial:hover) .services-v4-preview__image--commercial,
.mega-menu--services-v4:has(.services-v4-card--commercial:focus-within) .services-v4-preview__image--commercial,
.mega-menu--services-v4:has(.services-v4-card--commercial:hover) .services-v4-preview__caption--commercial,
.mega-menu--services-v4:has(.services-v4-card--commercial:focus-within) .services-v4-preview__caption--commercial,
.mega-menu--services-v4:has(.services-v4-card--org:hover) .services-v4-preview__image--org,
.mega-menu--services-v4:has(.services-v4-card--org:focus-within) .services-v4-preview__image--org,
.mega-menu--services-v4:has(.services-v4-card--org:hover) .services-v4-preview__caption--org,
.mega-menu--services-v4:has(.services-v4-card--org:focus-within) .services-v4-preview__caption--org,
.mega-menu--services-v4:has(.services-v4-card--ai:hover) .services-v4-preview__image--ai,
.mega-menu--services-v4:has(.services-v4-card--ai:focus-within) .services-v4-preview__image--ai,
.mega-menu--services-v4:has(.services-v4-card--ai:hover) .services-v4-preview__caption--ai,
.mega-menu--services-v4:has(.services-v4-card--ai:focus-within) .services-v4-preview__caption--ai,
.mega-menu--services-v4:has(.services-v4-card--digital:hover) .services-v4-preview__image--digital,
.mega-menu--services-v4:has(.services-v4-card--digital:focus-within) .services-v4-preview__image--digital,
.mega-menu--services-v4:has(.services-v4-card--digital:hover) .services-v4-preview__caption--digital,
.mega-menu--services-v4:has(.services-v4-card--digital:focus-within) .services-v4-preview__caption--digital,
.mega-menu--services-v4:has(.services-v4-card--crisis:hover) .services-v4-preview__image--crisis,
.mega-menu--services-v4:has(.services-v4-card--crisis:focus-within) .services-v4-preview__image--crisis,
.mega-menu--services-v4:has(.services-v4-card--crisis:hover) .services-v4-preview__caption--crisis,
.mega-menu--services-v4:has(.services-v4-card--crisis:focus-within) .services-v4-preview__caption--crisis,
.mega-menu--services-v4:has(.services-v4-card--scaling:hover) .services-v4-preview__image--scaling,
.mega-menu--services-v4:has(.services-v4-card--scaling:focus-within) .services-v4-preview__image--scaling,
.mega-menu--services-v4:has(.services-v4-card--scaling:hover) .services-v4-preview__caption--scaling,
.mega-menu--services-v4:has(.services-v4-card--scaling:focus-within) .services-v4-preview__caption--scaling{
opacity:1;
transform:translateY(0) scale(1);
}
}
@media (max-width:1180px){
.nav-dropdown--services .mega-menu--services-v4{display:none !important;}
}
/* /SERVICES MENU V4 FROM SCRATCH */
/* ACADEMY MEGA MENU */
@media (min-width:1181px){
.nav-dropdown--academy .nav-dropdown__panel{
position:fixed !important;
left:50vw !important;
top:84px !important;
width:min(1040px, calc(100vw - 42px)) !important;
padding:0 !important;
overflow:hidden;
border:1px solid #d9e4f2 !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:0 20px 56px rgba(27,54,98,.16),0 4px 18px rgba(27,54,98,.08) !important;
transform:translate(-50%, 10px) !important;
}
.nav-dropdown--academy:hover .nav-dropdown__panel,
.nav-dropdown--academy:focus-within .nav-dropdown__panel{
transform:translate(-50%, 0) !important;
}
}
.mega-menu--academy{
color:#173057;
text-transform:none;
line-height:1.25;
}
.academy-mega-head{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:18px;
padding:22px 24px 16px;
border-bottom:1px solid #e7eef8;
background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.academy-mega-head span{
display:block;
color:#0f57e6;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.02em;
}
.academy-mega-head small{
display:block;
margin-top:6px;
color:#526683;
font-size:14px;
line-height:1.35;
font-weight:650;
}
.academy-mega-head a{
display:inline-flex !important;
padding:0 !important;
background:transparent !important;
color:#0f57e6 !important;
font-size:13px;
font-weight:900;
text-transform:none;
white-space:nowrap !important;
}
.academy-mega-layout{
display:grid;
grid-template-columns:300px 1fr;
align-items:start;
gap:16px;
padding:16px;
}
.academy-mega-feature{
position:relative;
display:flex !important;
flex-direction:column;
justify-content:flex-end;
width:300px;
height:398px;
min-height:398px;
padding:22px !important;
border-radius:16px !important;
overflow:hidden;
background:
linear-gradient(180deg,rgba(255,255,255,.03) 0%,rgba(255,255,255,.18) 54%,rgba(245,249,255,.92) 100%),
url("../menu/academy-mega-visual.webp") center center / cover no-repeat !important;
color:#102243 !important;
border:1px solid #d8e6f8 !important;
white-space:normal !important;
box-shadow:0 16px 34px rgba(10,35,85,.18);
}
.academy-mega-feature::before{
content:"";
position:absolute;
inset:18px;
border:1px solid rgba(30,88,170,.20);
border-radius:13px;
pointer-events:none;
z-index:1;
}
.academy-mega-feature strong,
.academy-mega-feature span,
.academy-mega-feature em{
z-index:2;
}
.academy-mega-feature strong{
position:relative;
display:block;
max-width:220px;
color:#102243;
font-size:23px;
line-height:1.06;
font-weight:950;
letter-spacing:-.04em;
margin-bottom:12px;
}
.academy-mega-feature span{
position:relative;
display:block;
color:#3e5576;
font-size:14px;
line-height:1.45;
font-weight:650;
}
.academy-mega-feature em{
position:relative;
display:block;
margin-top:20px;
color:#0f57e6;
font-style:normal;
font-size:13px;
font-weight:900;
}
.academy-mega-list{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
}
.academy-mega-list a{
display:block !important;
min-height:92px;
padding:14px 15px !important;
border:1px solid #e3eaf4;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff,#fcfdff) !important;
color:#173057 !important;
white-space:normal !important;
box-shadow:0 3px 12px rgba(27,54,98,.035);
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.academy-mega-list a:hover,
.academy-mega-list a:focus-visible{
border-color:#bfd3ef;
background:#f7fbff !important;
transform:translateY(-1px);
box-shadow:0 12px 26px rgba(27,54,98,.09);
}
.academy-mega-list strong{
display:block;
margin:0 0 5px;
color:#102243;
font-size:14.6px;
line-height:1.15;
font-weight:950;
letter-spacing:-.02em;
}
.academy-mega-list span{
display:block;
color:#61718a;
font-size:12.4px;
line-height:1.32;
font-weight:620;
}
.academy-mega-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:14px 20px 18px;
border-top:1px solid #e7eef8;
background:linear-gradient(180deg,#fbfdff,#f5f9ff);
}
.academy-mega-bottom span{
color:#526683;
font-size:13.5px;
font-weight:650;
line-height:1.35;
}
.academy-mega-bottom a{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 15px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#2553E8 0%,#4f46e5 100%) !important;
color:#fff !important;
font-size:12.8px;
font-weight:900;
text-transform:none;
white-space:nowrap !important;
}
@media (max-width:1180px){
.nav-dropdown--academy .nav-dropdown__panel{display:none !important;}
.mobile-accordion__panel--academy{
grid-template-columns:repeat(2, minmax(0,1fr));
gap:8px;
}
.mobile-academy-link{
display:block;
min-height:88px;
padding:13px 14px;
border:1px solid #e4ebf6;
border-radius:14px;
background:linear-gradient(180deg,#fff,#fbfdff);
color:#102243;
text-decoration:none;
box-shadow:0 4px 14px rgba(15,23,42,.04);
}
.mobile-academy-link strong{
display:block;
color:#102243;
font-size:13px;
line-height:1.18;
font-weight:950;
letter-spacing:-.015em;
margin-bottom:5px;
}
.mobile-academy-link span{
display:block;
color:#61718a;
font-size:12px;
line-height:1.32;
font-weight:650;
}
}
@media (max-width:640px){
.mobile-accordion__panel--academy{grid-template-columns:1fr;}
.mobile-academy-link{min-height:auto;padding:12px 13px;}
}
/* /ACADEMY MEGA MENU */
/* About mega-menu */
@media (min-width:1181px){
.nav-dropdown--about .nav-dropdown__panel{
position:fixed !important;
left:50vw !important;
top:84px !important;
width:min(940px, calc(100vw - 42px)) !important;
padding:0 !important;
overflow:hidden;
border:1px solid #d9e4f2 !important;
border-radius:18px !important;
background:#fff !important;
box-shadow:0 20px 56px rgba(27,54,98,.16),0 4px 18px rgba(27,54,98,.08) !important;
transform:translate(-50%, 10px) !important;
}
.nav-dropdown--about:hover .nav-dropdown__panel,
.nav-dropdown--about:focus-within .nav-dropdown__panel{
transform:translate(-50%, 0) !important;
}
}
.mega-menu--about{
color:#173057;
text-transform:none;
line-height:1.25;
}
.about-mega-head{
display:grid;
grid-template-columns:1fr auto;
align-items:center;
gap:18px;
padding:22px 24px 16px;
border-bottom:1px solid #e7eef8;
background:linear-gradient(180deg,#ffffff,#fbfdff);
}
.about-mega-head span{
display:block;
color:#0f57e6;
font-size:20px;
line-height:1.1;
font-weight:950;
letter-spacing:-.02em;
}
.about-mega-head small{
display:block;
margin-top:6px;
color:#526683;
font-size:14px;
line-height:1.35;
font-weight:650;
}
.about-mega-head a{
display:inline-flex !important;
padding:0 !important;
background:transparent !important;
color:#0f57e6 !important;
font-size:13px;
font-weight:900;
text-transform:none;
white-space:nowrap !important;
}
.about-mega-layout{
display:grid;
grid-template-columns:280px 1fr;
gap:16px;
padding:16px;
}
.about-mega-feature{
position:relative;
display:flex !important;
flex-direction:column;
justify-content:flex-end;
min-height:296px;
padding:22px !important;
border-radius:16px !important;
overflow:hidden;
background:
radial-gradient(circle at 82% 14%,rgba(255,205,58,.5),transparent 25%),
linear-gradient(135deg,#08245e 0%,#174d99 52%,#f4f8ff 100%) !important;
color:#fff !important;
white-space:normal !important;
box-shadow:0 16px 34px rgba(10,35,85,.16);
}
.about-mega-feature::before{
content:"";
position:absolute;
inset:18px;
border:1px solid rgba(255,255,255,.2);
border-radius:13px;
pointer-events:none;
}
.about-mega-feature strong{
position:relative;
display:block;
max-width:220px;
color:#fff;
font-size:25px;
line-height:1.06;
font-weight:950;
letter-spacing:-.04em;
margin-bottom:12px;
}
.about-mega-feature span{
position:relative;
display:block;
color:rgba(255,255,255,.88);
font-size:14px;
line-height:1.45;
font-weight:650;
}
.about-mega-feature em{
position:relative;
display:block;
margin-top:20px;
color:#ffcf3a;
font-style:normal;
font-size:13px;
font-weight:900;
}
.about-mega-list{
display:grid;
grid-template-columns:repeat(2, minmax(0,1fr));
gap:10px;
}
.about-mega-list a{
display:block !important;
min-height:92px;
padding:14px 15px !important;
border:1px solid #e3eaf4;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff,#fcfdff) !important;
color:#173057 !important;
white-space:normal !important;
box-shadow:0 3px 12px rgba(27,54,98,.035);
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
}
.about-mega-list a:hover,
.about-mega-list a:focus-visible{
border-color:#bfd3ef;
background:#f7fbff !important;
transform:translateY(-1px);
box-shadow:0 12px 26px rgba(27,54,98,.09);
}
.about-mega-list strong{
display:block;
margin:0 0 5px;
color:#102243;
font-size:14.6px;
line-height:1.15;
font-weight:950;
letter-spacing:-.02em;
}
.about-mega-list span{
display:block;
color:#61718a;
font-size:12.4px;
line-height:1.32;
font-weight:620;
}
.about-mega-bottom{
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
padding:14px 20px 18px;
border-top:1px solid #e7eef8;
background:linear-gradient(180deg,#fbfdff,#f5f9ff);
}
.about-mega-bottom span{
color:#526683;
font-size:13.5px;
font-weight:650;
line-height:1.35;
}
.about-mega-bottom a{
display:inline-flex !important;
align-items:center;
justify-content:center;
min-height:38px;
padding:0 15px !important;
border-radius:999px !important;
background:linear-gradient(135deg,#2553E8 0%,#4f46e5 100%) !important;
color:#fff !important;
font-size:13px;
font-weight:900;
text-transform:none !important;
white-space:nowrap !important;
box-shadow:0 10px 22px rgba(37,83,232,.22);
}
.mobile-accordion--about .mobile-accordion__panel{
display:none;
}
.mobile-accordion--about.is-open .mobile-accordion__panel,
.mobile-accordion--about[data-open="true"] .mobile-accordion__panel{
display:block;
}
.mobile-about-link strong{color:#102243;}
.mobile-about-link span{color:#61718a;}
@media (max-width:1180px){
.nav-dropdown--about .nav-dropdown__panel{display:none !important;}
}
/* /About mega-menu */
/* About mega-menu hover preview */
@media (min-width:1181px){
.mega-menu--about{
width:min(940px, calc(100vw - 42px)) !important;
}
.about-mega-layout--hover{
display:grid !important;
grid-template-columns:repeat(2, minmax(0, 1fr)) 280px !important;
grid-auto-rows:92px !important;
gap:10px 16px !important;
padding:16px !important;
align-items:stretch !important;
}
.about-mega-layout--hover .about-mega-card{
display:block !important;
min-height:92px !important;
padding:14px 15px !important;
border:1px solid #e3eaf4 !important;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff,#fcfdff) !important;
color:#173057 !important;
white-space:normal !important;
box-shadow:0 3px 12px rgba(27,54,98,.035) !important;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}
.about-mega-layout--hover .about-mega-card:hover,
.about-mega-layout--hover .about-mega-card:focus-visible{
border-color:#bfd3ef !important;
background:#f7fbff !important;
transform:translateY(-1px) !important;
box-shadow:0 12px 26px rgba(27,54,98,.09) !important;
}
.about-mega-layout--hover .about-mega-card strong{
display:block !important;
margin:0 0 5px !important;
color:#102243 !important;
font-size:14.6px !important;
line-height:1.15 !important;
font-weight:950 !important;
letter-spacing:-.02em !important;
}
.about-mega-layout--hover .about-mega-card span{
display:block !important;
color:#61718a !important;
font-size:12.4px !important;
line-height:1.32 !important;
font-weight:620 !important;
}
.about-mega-preview{
position:relative !important;
grid-column:3 !important;
grid-row:1 / span 3 !important;
min-height:296px !important;
border-radius:16px !important;
overflow:hidden !important;
border:1px solid #d9e8fb !important;
background:#f3f8ff !important;
box-shadow:0 16px 34px rgba(10,35,85,.12) !important;
}
.about-preview-layer{
position:absolute !important;
inset:0 !important;
display:flex !important;
align-items:flex-end !important;
padding:18px !important;
background-size:cover !important;
background-position:center !important;
opacity:0 !important;
transition:opacity .18s ease !important;
}
.about-preview-layer::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(4,14,35,0) 42%,rgba(4,14,35,.78) 100%);
}
.about-preview-layer b{
position:relative;
z-index:1;
color:#ffffff;
font-size:18px;
line-height:1.08;
font-weight:950;
letter-spacing:-.03em;
text-shadow:0 2px 10px rgba(0,0,0,.42);
}
.about-preview-layer--company{background-image:url('../menu/about-preview-company.webp');opacity:1 !important;}
.about-preview-layer--team{background-image:url('../menu/about-preview-team.webp');}
.about-preview-layer--methodology{background-image:url('../menu/about-preview-methodology.webp');}
.about-preview-layer--work{background-image:url('../menu/about-preview-work.webp');}
.about-preview-layer--contacts{background-image:url('../menu/about-preview-contacts.webp');}
.about-preview-layer--results{background-image:url('../menu/about-preview-results.webp');}
.about-mega-card:hover ~ .about-mega-preview .about-preview-layer,
.about-mega-card:focus-visible ~ .about-mega-preview .about-preview-layer{opacity:0 !important;}
.about-mega-card--company:hover ~ .about-mega-preview .about-preview-layer--company,
.about-mega-card--company:focus-visible ~ .about-mega-preview .about-preview-layer--company{opacity:1 !important;}
.about-mega-card--team:hover ~ .about-mega-preview .about-preview-layer--team,
.about-mega-card--team:focus-visible ~ .about-mega-preview .about-preview-layer--team{opacity:1 !important;}
.about-mega-card--methodology:hover ~ .about-mega-preview .about-preview-layer--methodology,
.about-mega-card--methodology:focus-visible ~ .about-mega-preview .about-preview-layer--methodology{opacity:1 !important;}
.about-mega-card--work:hover ~ .about-mega-preview .about-preview-layer--work,
.about-mega-card--work:focus-visible ~ .about-mega-preview .about-preview-layer--work{opacity:1 !important;}
.about-mega-card--contacts:hover ~ .about-mega-preview .about-preview-layer--contacts,
.about-mega-card--contacts:focus-visible ~ .about-mega-preview .about-preview-layer--contacts{opacity:1 !important;}
.about-mega-card--results:hover ~ .about-mega-preview .about-preview-layer--results,
.about-mega-card--results:focus-visible ~ .about-mega-preview .about-preview-layer--results{opacity:1 !important;}
}
/* /About mega-menu hover preview */
/* INDUSTRIES MEGA MENU — cases/results moved from top nav */
.industry-mega-bottom__actions{
display:flex !important;
align-items:center !important;
justify-content:flex-end !important;
gap:10px !important;
flex-shrink:0 !important;
}
.industry-mega-bottom__link,
.industry-mega-bottom__link:link,
.industry-mega-bottom__link:visited{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:34px !important;
padding:0 14px !important;
border:1px solid #cfe0f8 !important;
border-radius:11px !important;
background:#ffffff !important;
color:#0f57e6 !important;
font-size:13px !important;
font-weight:900 !important;
line-height:1 !important;
text-decoration:none !important;
white-space:nowrap !important;
box-shadow:0 8px 20px rgba(27,54,98,.07) !important;
transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease !important;
}
.industry-mega-bottom__link:hover,
.industry-mega-bottom__link:focus-visible{
background:#f7fbff !important;
border-color:#abc7ee !important;
color:#0f57e6 !important;
transform:translateY(-1px) !important;
box-shadow:0 12px 26px rgba(27,54,98,.11) !important;
outline:none !important;
}
@media (max-width:760px){
.industry-mega-bottom__actions{
width:100% !important;
justify-content:flex-start !important;
flex-wrap:wrap !important;
}
}
/* END INDUSTRIES MEGA MENU — cases/results moved from top nav */
/* INDUSTRIES MEGA: visible cases/results card */
@media (min-width:1181px){
.industry-mega-grid--with-results{
grid-template-columns:repeat(5, minmax(0,1fr)) !important;
gap:12px !important;
padding:16px 16px 14px !important;
}
.industry-mega-grid--with-results .industry-mega-card{
padding:10px 10px 12px !important;
border-radius:16px !important;
}
.industry-mega-grid--with-results .industry-mega-card__image{
height:88px !important;
margin-bottom:10px !important;
}
.industry-mega-grid--with-results .industry-mega-card__title{
font-size:14px !important;
line-height:1.16 !important;
margin-bottom:8px !important;
}
.industry-mega-grid--with-results .industry-mega-card__list{
gap:6px !important;
}
.industry-mega-grid--with-results .industry-mega-card__list a{
font-size:12.2px !important;
line-height:1.18 !important;
}
.industry-mega-card--results{
border-color:#b7cdf2 !important;
background:linear-gradient(180deg,#f8fbff 0%,#eef5ff 100%) !important;
box-shadow:0 14px 34px rgba(37,83,232,.12) !important;
}
.industry-mega-card--results .industry-mega-card__image{
border-color:#bad0ef !important;
background:#0d2b63 !important;
}
.industry-mega-card--results .industry-mega-card__title{
color:#0f57e6 !important;
}
.industry-mega-card--results:hover{
border-color:#7ca4ec !important;
box-shadow:0 18px 42px rgba(37,83,232,.18) !important;
}
.industry-mega-bottom--with-results{
margin-top:0 !important;
}
}
.mobile-industry-results-card{
display:flex !important;
gap:12px !important;
align-items:center !important;
margin:10px 0 12px !important;
padding:10px !important;
border:1px solid #c9d9f3 !important;
border-radius:16px !important;
background:linear-gradient(180deg,#ffffff,#f3f7ff) !important;
text-decoration:none !important;
box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
}
.mobile-industry-results-card__media{
flex:0 0 92px !important;
height:62px !important;
border-radius:12px !important;
overflow:hidden !important;
background:#eef4fb !important;
}
.mobile-industry-results-card__media img{
display:block !important;
width:100% !important;
height:100% !important;
object-fit:cover !important;
}
.mobile-industry-results-card__body{
display:block !important;
min-width:0 !important;
}
.mobile-industry-results-card__body strong{
display:block !important;
color:#0f57e6 !important;
font-size:14px !important;
line-height:1.15 !important;
font-weight:950 !important;
margin-bottom:4px !important;
}
.mobile-industry-results-card__body small{
display:block !important;
color:#526683 !important;
font-size:12.2px !important;
line-height:1.3 !important;
font-weight:650 !important;
}
/* SOFTWARE MEGA MENU */
.nav-dropdown--software .nav-dropdown__panel{
width:min(860px, calc(100vw - 42px)) !important;
}
.software-mega-head{
display:flex !important;
align-items:flex-start !important;
justify-content:space-between !important;
gap:16px !important;
padding:20px 22px 14px !important;
border-bottom:1px solid #e4edf8 !important;
}
.software-mega-head span{
display:block !important;
color:#0f57e6 !important;
font-size:16px !important;
font-weight:950 !important;
line-height:1.05 !important;
letter-spacing:-.02em !important;
margin-bottom:6px !important;
}
.software-mega-head small{
display:block !important;
color:#60718b !important;
font-size:13.5px !important;
line-height:1.4 !important;
font-weight:620 !important;
max-width:520px !important;
}
.software-mega-head a{
align-self:center !important;
color:#0f57e6 !important;
font-size:13.5px !important;
font-weight:900 !important;
white-space:nowrap !important;
}
.software-mega-layout{
display:grid !important;
grid-template-columns:minmax(0,1fr) 300px !important;
grid-auto-rows:minmax(94px,auto) !important;
gap:12px 16px !important;
padding:16px !important;
align-items:stretch !important;
}
.software-mega-card{
display:block !important;
min-height:94px !important;
padding:15px 16px !important;
border:1px solid #e3eaf4 !important;
border-radius:14px !important;
background:linear-gradient(180deg,#ffffff,#fcfdff) !important;
color:#173057 !important;
white-space:normal !important;
box-shadow:0 3px 12px rgba(27,54,98,.035) !important;
transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease !important;
}
.software-mega-card:hover,
.software-mega-card:focus-visible{
border-color:#bfd3ef !important;
background:#f7fbff !important;
transform:translateY(-1px) !important;
box-shadow:0 12px 26px rgba(27,54,98,.09) !important;
}
.software-mega-card strong{
display:block !important;
margin:0 0 5px !important;
color:#102243 !important;
font-size:15px !important;
line-height:1.15 !important;
font-weight:950 !important;
letter-spacing:-.02em !important;
}
.software-mega-card span{
display:block !important;
color:#61718a !important;
font-size:12.6px !important;
line-height:1.35 !important;
font-weight:620 !important;
}
.software-mega-preview{
position:relative !important;
grid-column:2 !important;
grid-row:1 / span 3 !important;
min-height:306px !important;
border-radius:16px !important;
overflow:hidden !important;
border:1px solid #d9e8fb !important;
background:#f3f8ff !important;
box-shadow:0 16px 34px rgba(10,35,85,.12) !important;
}
.software-preview-layer{
position:absolute !important;
inset:0 !important;
display:flex !important;
align-items:flex-end !important;
padding:18px !important;
background-size:cover !important;
background-position:center !important;
opacity:0 !important;
transition:opacity .18s ease !important;
}
.software-preview-layer::after{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,rgba(4,14,35,0) 42%,rgba(4,14,35,.68) 100%);
}
.software-preview-layer b{
position:relative;
z-index:1;
color:#ffffff;
font-size:18px;
line-height:1.08;
font-weight:950;
letter-spacing:-.03em;
text-shadow:0 2px 10px rgba(0,0,0,.42);
}
.software-preview-layer--finmodel{background-image:url('../menu/software-finmodels.webp');opacity:1 !important;}
.software-preview-layer--accounting{background-image:url('../menu/software-management-accounting-ai.webp');}
.software-preview-layer--consultant{background-image:url('../menu/software-ai-consultant.webp');}
.software-mega-card:hover ~ .software-mega-preview .software-preview-layer,
.software-mega-card:focus-visible ~ .software-mega-preview .software-preview-layer{opacity:0 !important;}
.software-mega-card--finmodel:hover ~ .software-mega-preview .software-preview-layer--finmodel,
.software-mega-card--finmodel:focus-visible ~ .software-mega-preview .software-preview-layer--finmodel{opacity:1 !important;}
.software-mega-card--accounting:hover ~ .software-mega-preview .software-preview-layer--accounting,
.software-mega-card--accounting:focus-visible ~ .software-mega-preview .software-preview-layer--accounting{opacity:1 !important;}
.software-mega-card--consultant:hover ~ .software-mega-preview .software-preview-layer--consultant,
.software-mega-card--consultant:focus-visible ~ .software-mega-preview .software-preview-layer--consultant{opacity:1 !important;}
.software-mega-bottom{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:16px !important;
padding:12px 16px 16px !important;
border-top:1px solid #eef3fa !important;
}
.software-mega-bottom span{
color:#5f718c !important;
font-size:13.1px !important;
line-height:1.4 !important;
font-weight:620 !important;
}
.software-mega-bottom a{
display:inline-flex !important;
align-items:center !important;
justify-content:center !important;
min-height:36px !important;
padding:0 16px !important;
border-radius:12px !important;
background:linear-gradient(135deg,#4a63ff 0%,#4455f6 100%) !important;
color:#ffffff !important;
font-size:13.2px !important;
font-weight:900 !important;
line-height:1 !important;
white-space:nowrap !important;
box-shadow:0 12px 24px rgba(68,85,246,.18) !important;
}
@media (max-width:760px){
.software-mega-head,
.software-mega-layout,
.software-mega-bottom{
padding-left:14px !important;
padding-right:14px !important;
}
.software-mega-layout{
grid-template-columns:1fr !important;
}
.software-mega-preview{
grid-column:1 !important;
grid-row:auto !important;
min-height:220px !important;
}
.software-mega-bottom{
flex-direction:column !important;
align-items:flex-start !important;
}
}
/* /SOFTWARE MEGA MENU */
/* MOBILE CARD MENU FIX — academy/about/software */
.mobile-accordion__panel--academy.mobile-accordion__panel--industry-cards,
.mobile-accordion__panel--about.mobile-accordion__panel--industry-cards,
.mobile-accordion__panel--software.mobile-accordion__panel--industry-cards{
padding:14px !important;
}
.mobile-software-card .mobile-industry-card__media img,
.mobile-academy-card .mobile-industry-card__media img,
.mobile-about-card .mobile-industry-card__media img{
width:100% !important;
height:100% !important;
object-fit:cover !important;
display:block !important;
}
.mobile-software-card .mobile-industry-card__summary,
.mobile-academy-card .mobile-industry-card__summary,
.mobile-about-card .mobile-industry-card__summary{
min-height:96px !important;
}
/* /MOBILE CARD MENU FIX — academy/about/software */
/* LOGO ALIGNMENT AND DESKTOP WIDTH — tablet/mobile */
@media (max-width: 1024px){
.site-header .header__inner{
min-height: 88px !important;
align-items: center !important;
}
header.site-header .brand,
.site-header .header__inner > .brand{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 280px !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
header.site-header .brand-video.brand-logo-apng,
.site-header .brand-video.brand-logo-apng,
header.site-header .brand > .brand-video.brand-logo-apng,
.site-header .header__inner > .brand > .brand-video.brand-logo-apng{
width: 280px !important;
min-width: 280px !important;
max-width: 280px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-top: 0 !important;
display: block !important;
object-fit: contain !important;
object-position: left center !important;
transform: none !important;
}
footer .footer__brand,
.site-footer .footer__brand,
footer .brand,
footer a.brand,
.site-footer .brand,
.site-footer a.brand{
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 300px !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
overflow: visible !important;
}
footer .footer__brand .brand-video.brand-logo-apng,
.site-footer .footer__brand .brand-video.brand-logo-apng,
footer .brand-video.brand-logo-apng,
.site-footer .brand-video.brand-logo-apng{
width: 300px !important;
min-width: 300px !important;
max-width: 300px !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin-top: 0 !important;
display: block !important;
object-fit: contain !important;
object-position: left center !important;
transform: none !important;
}
.brand-video.brand-logo-apng:hover{
transform: none !important;
}
}
/* /LOGO ALIGNMENT AND DESKTOP WIDTH — tablet/mobile */
/* LOGO LEFT POSITION FIX */
.site-header .header__inner{
position: relative !important;
}
.site-header .brand,
.site-header .header__inner > .brand{
margin-left: -34px !important;
}
@media (max-width: 1180px){
.site-header .brand,
.site-header .header__inner > .brand{
margin-left: -28px !important;
}
}
@media (max-width: 760px){
.site-header .brand,
.site-header .header__inner > .brand{
margin-left: -22px !important;
}
}
@media (max-width: 420px){
.site-header .brand,
.site-header .header__inner > .brand{
margin-left: -18px !important;
}
}
/* /LOGO LEFT POSITION FIX */
/* HEADER HERO SMOOTH TRANSPARENT UNTIL SCROLL */
:root{
--header-solid-opacity: 0;
--header-border-opacity: 0;
--header-shadow-opacity: 0;
--header-hero-overlay-opacity: 0;
}
/* Same header behavior on every page: transparent at top, solid after scroll. */
.site-header{
background: rgba(255,255,255,var(--header-solid-opacity)) !important;
border-bottom-color: rgba(209,219,236,var(--header-border-opacity)) !important;
box-shadow: 0 10px 32px rgba(15,23,42,calc(.06 * var(--header-shadow-opacity))) !important;
backdrop-filter: blur(calc(16px * var(--header-solid-opacity))) !important;
-webkit-backdrop-filter: blur(calc(16px * var(--header-solid-opacity))) !important;
transition:
background-color .36s cubic-bezier(.22,.61,.36,1),
border-color .36s cubic-bezier(.22,.61,.36,1),
box-shadow .36s cubic-bezier(.22,.61,.36,1),
backdrop-filter .36s cubic-bezier(.22,.61,.36,1) !important;
}
.site-header::before{
content:none !important;
display:none !important;
}
body.is-scrolled .site-header{
/* Final state is supplied by --header-solid-opacity to avoid a visual jump. */
}
/* Put the first screen under the transparent header, like the homepage hero. */
.home-page .hero{
margin-top: -88px !important;
padding-top: calc(var(--hero-pad-top, 112px) + 88px) !important;
}
body:not(.home-page) main > section:first-child{
margin-top: -88px !important;
}
.ai-evb-page main > section:first-child{
padding-top: calc(clamp(92px,10vw,140px) + 88px) !important;
}
.multipage:not(.tool-page) main > section:first-child{
padding-top: calc(96px + 88px) !important;
}
.tool-page main > section:first-child{
padding-top: calc(72px + 88px) !important;
}
@media (max-width: 1024px){
.home-page .hero{
margin-top: -88px !important;
padding-top: calc(var(--hero-pad-top, 104px) + 88px) !important;
}
.ai-evb-page main > section:first-child{
padding-top: calc(clamp(84px,10vw,124px) + 88px) !important;
}
.multipage:not(.tool-page) main > section:first-child{
padding-top: calc(88px + 88px) !important;
}
}
@media (max-width: 760px){
.home-page .hero{
margin-top: -88px !important;
padding-top: calc(var(--hero-pad-top, 96px) + 88px) !important;
}
.ai-evb-page main > section:first-child,
.multipage:not(.tool-page) main > section:first-child,
.tool-page main > section:first-child{
padding-top: calc(78px + 88px) !important;
}
}
/* /HEADER HERO SMOOTH TRANSPARENT UNTIL SCROLL */
/* PAGESPEED REPORT FIXES */
/* Lighthouse reported one non-composited animated element. Keep APNG playback, remove CSS hover transform on logo. */
.brand-video.brand-logo-apng,
.brand-video.brand-logo-apng:hover{
transform: none !important;
}
/* Prevent image intrinsic-size layout shifts where CSS backgrounds/previews use image content. */
img[width][height]{
height: auto;
}
/* /PAGESPEED REPORT FIXES */
/* LCP FIX — hero parent container */
/* Fact: hero has classes "hero section-pad anim-section anim-hero".
Existing global reveal rule hides ".anim-section:not(.anim-visible) > .container".
Therefore the first-screen hero container must be visible immediately for LCP. */
.home-page .hero.anim-section > .container,
.home-page .hero.anim-section:not(.anim-visible) > .container{
opacity:1 !important;
transform:none !important;
transition:none !important;
}
/* Internal first-screen candidates must not start hidden either. */
.home-page .hero .hero__content,
.home-page .hero .hero__visual,
.home-page .hero .service-list li{
opacity:1 !important;
}
/* Disable hero entrance animations that can keep LCP candidates out of stable paint.
This does not change colors, backgrounds, gradients, shadows, sizes or layout. */
.home-page .hero.anim-visible .hero__content,
.home-page .hero.anim-visible .hero__visual,
.home-page .hero.anim-visible .service-list li{
animation:none !important;
}
/* Lighthouse reported the remaining non-composited animation on hero-stack:
animation "evb-glow-pulse" uses filter. Keep only transform-based floating. */
.home-page .hero.anim-visible .hero-stack{
animation: evb-soft-float 6.5s ease-in-out 1.1s infinite !important;
}
/* /LCP FIX — hero parent container */
/* LCP HARD FIX — explicit first-screen LCP candidate.
Reason: Lighthouse trace for 2026-07-07 showed FCP but no LargestContentfulPaint candidate.
The first-screen hero scene was delivered mainly through CSS background/pseudo-elements and animated layers.
This rule keeps the same visual scene but exposes it as a real, stable ![]()
paint. */
.home-page .hero{
background:#edf5ff !important;
}
.home-page .hero > .hero-lcp-bg{
position:absolute !important;
inset:0 !important;
display:block !important;
width:100% !important;
height:100% !important;
max-width:none !important;
object-fit:cover !important;
object-position:center center !important;
opacity:1 !important;
visibility:visible !important;
transform:none !important;
translate:none !important;
scale:none !important;
rotate:none !important;
animation:none !important;
transition:none !important;
filter:none !important;
will-change:auto !important;
pointer-events:none !important;
z-index:0 !important;
}
.home-page .hero::before,
.home-page .hero::after{
z-index:0 !important;
animation:none !important;
transform:none !important;
transition:none !important;
will-change:auto !important;
}
.home-page .hero > .container{
position:relative !important;
z-index:1 !important;
}
/* Do not replace the foreground ![]()
through CSS content.
The real src/currentSrc must remain visible to browser paint instrumentation. */
.home-page .hero .hero-stack{
content:normal !important;
animation:none !important;
transition:none !important;
will-change:auto !important;
}
/* Keep hero text and its ancestors immediately paintable for LCP. */
.home-page .hero,
.home-page .hero > .container,
.home-page .hero .hero__grid,
.home-page .hero .hero__content,
.home-page .hero h1{
opacity:1 !important;
visibility:visible !important;
}
.home-page .hero > .container,
.home-page .hero .hero__grid,
.home-page .hero .hero__content,
.home-page .hero h1{
transform:none !important;
animation:none !important;
transition:none !important;
}
/* TOP MENU HOVER FIX — localize invisible bridge under each nav item only.
Fixes dropdown flicker/random hover caused by .nav-dropdown--services being static
while .nav-dropdown--mega::before is absolutely positioned. */
@media (min-width: 901px) {
.main-nav > .nav-dropdown.nav-dropdown--mega,
.main-nav > .nav-dropdown.nav-dropdown--services {
position: relative !important;
}
.main-nav > .nav-dropdown.nav-dropdown--mega::before {
left: -10px !important;
right: -10px !important;
top: 100% !important;
height: 48px !important;
}
}
/* TOP MENU BEHAVIOR FIX V26
Open desktop dropdowns only from their own trigger/panel, not from invisible header zones. */
@media (min-width: 901px) {
.main-nav > .nav-dropdown.nav-dropdown--mega::before {
content: none !important;
display: none !important;
}
.main-nav > .nav-dropdown:hover > .nav-dropdown__panel {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.main-nav > .nav-dropdown.is-dropdown-open > .nav-dropdown__panel,
.main-nav > .nav-dropdown:focus-within > .nav-dropdown__panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.main-nav > .nav-dropdown.nav-dropdown--mega.is-dropdown-open > .nav-dropdown__panel,
.main-nav > .nav-dropdown.nav-dropdown--mega:focus-within > .nav-dropdown__panel {
transform: translate(-50%, 0) !important;
}
.main-nav > .nav-dropdown.nav-dropdown--services.is-dropdown-open > .mega-menu--services-v4,
.main-nav > .nav-dropdown.nav-dropdown--services:focus-within > .mega-menu--services-v4 {
transform: translateX(-50%) translateY(0) !important;
}
}
/* /TOP MENU BEHAVIOR FIX V26 */
/* TOP MENU BEHAVIOR LOCK V30
Desktop dropdowns are closed by default and may open only via JS class .is-dropdown-open
or keyboard focus. This prevents empty header hover zones from triggering dropdowns. */
@media (min-width: 901px) {
.main-nav > .nav-dropdown.nav-dropdown--mega::before {
content: none !important;
display: none !important;
pointer-events: none !important;
}
.main-nav > .nav-dropdown > .nav-dropdown__panel {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
.main-nav > .nav-dropdown.is-dropdown-open > .nav-dropdown__panel,
.main-nav > .nav-dropdown:focus-within > .nav-dropdown__panel {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
}
.main-nav > .nav-dropdown.nav-dropdown--mega.is-dropdown-open > .nav-dropdown__panel,
.main-nav > .nav-dropdown.nav-dropdown--mega:focus-within > .nav-dropdown__panel {
transform: translate(-50%, 0) !important;
}
.main-nav > .nav-dropdown.nav-dropdown--services.is-dropdown-open > .mega-menu--services-v4,
.main-nav > .nav-dropdown.nav-dropdown--services:focus-within > .mega-menu--services-v4 {
transform: translateX(-50%) translateY(0) !important;
}
}
/* /TOP MENU BEHAVIOR LOCK V30 */
/* Эволюция бизнеса production SEO layer: 404 page */
.not-found-page {
min-height: 58vh;
}
.not-found {
padding: clamp(72px, 10vw, 132px) 0;
}
.not-found__inner {
max-width: 780px;
}
.not-found__inner .lead {
max-width: 680px;
}
.not-found__actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 28px;
}
@media (max-width: 640px) {
.not-found__actions {
flex-direction: column;
align-items: stretch;
}
.not-found__actions .btn {
width: 100%;
justify-content: center;
}
}
/* v62 verified responsive containment patch — global header/footer/content */
@media (max-width:1024px){
html,body{width:100%;max-width:100%;}
*,*::before,*::after{box-sizing:border-box;}
main,section,footer,header,.site-header,.site-footer{max-width:100%;min-width:0;}
.container{width:min(100% - 32px,1180px) !important;max-width:calc(100vw - 32px) !important;min-width:0 !important;}
.site-header .header__inner{width:100% !important;max-width:100% !important;min-width:0 !important;gap:10px !important;}
.site-header .brand,.site-header .header__inner>.brand,header.site-header .brand{margin-left:0 !important;min-width:0 !important;max-width:calc(100vw - 92px) !important;width:auto !important;flex:0 1 min(220px,calc(100vw - 92px)) !important;overflow:hidden !important;}
.site-header .brand-video,.site-header .brand-video.brand-logo-apng,.site-header .brand>.brand-video.brand-logo-apng,.site-header .header__inner>.brand>.brand-video.brand-logo-apng{width:min(220px,100%) !important;min-width:0 !important;max-width:100% !important;height:auto !important;display:block !important;object-fit:contain !important;}
.burger{flex:0 0 42px !important;width:42px !important;min-width:42px !important;margin-left:auto !important;}
.mobile-menu{left:16px !important;right:16px !important;width:auto !important;max-width:calc(100vw - 32px) !important;min-width:0 !important;}
.site-footer .footer__grid,footer .footer__grid{max-width:100% !important;min-width:0 !important;}
.site-footer .footer__brand,footer .footer__brand,.site-footer .brand,footer .brand,.site-footer a.brand,footer a.brand{margin-left:0 !important;min-width:0 !important;max-width:100% !important;width:100% !important;flex:0 1 auto !important;overflow:hidden !important;}
.site-footer .footer__brand .brand-video.brand-logo-apng,footer .footer__brand .brand-video.brand-logo-apng,.site-footer .brand-video.brand-logo-apng,footer .brand-video.brand-logo-apng{width:min(220px,100%) !important;min-width:0 !important;max-width:100% !important;height:auto !important;}
.site-footer p,footer p{max-width:100% !important;min-width:0 !important;overflow-wrap:anywhere;}
.cta__box,.trust__box,.platform__box,.finmodel__box{max-width:100% !important;min-width:0 !important;}
.process-grid,.cards-grid,.service-list,.metrics,.client-logos{min-width:0 !important;max-width:100% !important;}
.process-grid>* ,.cards-grid>* ,.service-list>* ,.metrics>* ,.client-logos>*{min-width:0 !important;}
}
@media (max-width:640px){
.container{width:calc(100% - 24px) !important;max-width:calc(100vw - 24px) !important;}
.site-header .header__inner{height:66px !important;min-height:66px !important;}
.site-header .brand,.site-header .header__inner>.brand,header.site-header .brand{max-width:calc(100vw - 82px) !important;flex-basis:min(190px,calc(100vw - 82px)) !important;}
.site-header .brand-video,.site-header .brand-video.brand-logo-apng,.site-header .brand>.brand-video.brand-logo-apng,.site-header .header__inner>.brand>.brand-video.brand-logo-apng{width:min(190px,100%) !important;}
.mobile-menu{top:66px !important;left:12px !important;right:12px !important;max-width:calc(100vw - 24px) !important;grid-template-columns:1fr !important;}
.footer__grid,.site-footer .footer__grid,footer .footer__grid{grid-template-columns:1fr !important;gap:24px !important;}
.footer__bottom{max-width:100% !important;min-width:0 !important;}
.process-grid{grid-template-columns:1fr !important;}
.cards-grid,.service-list{grid-template-columns:1fr !important;}
.metrics,.client-logos{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
.cta__box{grid-template-columns:1fr !important;padding-inline:20px !important;}
}
@media (max-width:380px){
.container{width:calc(100% - 20px) !important;max-width:calc(100vw - 20px) !important;}
.site-header .brand,.site-header .header__inner>.brand,header.site-header .brand{max-width:calc(100vw - 76px) !important;}
.site-header .brand-video,.site-header .brand-video.brand-logo-apng{width:min(170px,100%) !important;}
}
/* v63 CTA responsive fix — verified against real CTA audit findings.
Scope: mobile/tablet CTA sizing only. HTML/text unchanged. */
@media (max-width:430px){
a.btn,
.btn,
.btn.primary,
.btn.secondary,
button.btn,
input[type="submit"].btn,
.hero__actions a.btn,
.hero__actions .btn,
.cta__box a.btn,
.cta__box .btn,
.section a.btn,
.section .btn,
.platform a.btn,
.platform .btn,
.finmodel__box a.btn,
.finmodel__box .btn{
box-sizing:border-box !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
flex:0 1 100% !important;
padding-left:16px !important;
padding-right:16px !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
text-align:center !important;
line-height:1.22 !important;
}
.hero__actions,
.cta__actions,
.section-actions,
.actions,
.hero-actions,
.cta-actions,
.ai-actions,
.page-actions{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:12px !important;
}
.page-shell,
.page-shell.has-sidebar,
.page-sidebar,
.page-main-card{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
}
.page-sidebar{
padding:18px !important;
overflow:hidden !important;
}
.page-sidebar .menu-group-items,
.page-sidebar .menu-children{
padding-left:0 !important;
max-width:100% !important;
min-width:0 !important;
}
.page-sidebar .menu-link,
a.menu-link{
box-sizing:border-box !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
word-break:normal !important;
}
}
/* v64 CTA responsive fix — remaining hero cta-row on systematization/mobile templates. */
@media (max-width:430px){
.cta-row{
width:100% !important;
max-width:100% !important;
min-width:0 !important;
display:flex !important;
flex-direction:column !important;
align-items:stretch !important;
gap:12px !important;
}
.cta-row a.btn,
.cta-row .btn,
.hero-copy .cta-row a.btn,
.hero-copy .cta-row .btn{
box-sizing:border-box !important;
width:100% !important;
max-width:100% !important;
min-width:0 !important;
flex:0 1 100% !important;
padding-left:16px !important;
padding-right:16px !important;
white-space:normal !important;
overflow-wrap:anywhere !important;
text-align:center !important;
line-height:1.22 !important;
}
}
/* v64 CTA responsive hard cap for 320px hero buttons. */
@media (max-width:430px){
.multipage .hero-copy .cta-row,
.multipage .hero .cta-row{
width:calc(100vw - 64px) !important;
max-width:calc(100vw - 64px) !important;
min-width:0 !important;
}
.multipage .hero-copy .cta-row a.btn,
.multipage .hero-copy .cta-row .btn,
.multipage .hero .cta-row a.btn,
.multipage .hero .cta-row .btn{
width:calc(100vw - 64px) !important;
max-width:calc(100vw - 64px) !important;
min-width:0 !important;
}
}
/* v65 — Codex CTA video background, matched to saved source markup/state. */
#request.cta-section{
position:relative !important;
overflow:hidden !important;
isolation:isolate;
background:#fff !important;
}
#request .cta-codex-bg{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
pointer-events:none;
}
#request .cta-codex-bg__mask{
width:100%;
height:100%;
overflow:hidden;
}
#request .cta-codex-bg__video{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
#request .cta__box{
position:relative;
z-index:10;
}
#request .cta__box::before{
content:none !important;
display:none !important;
}
#request .cta-chat{
display:none !important;
}
/* v69 — Codex marketing header height.
Source values: 64px by default; 72px on coarse-pointer devices. */
:root{
--evb-header-height:64px;
}
@media (pointer:coarse){
:root{
--evb-header-height:72px;
}
}
.site-header .header__inner{
height:var(--evb-header-height) !important;
min-height:var(--evb-header-height) !important;
}
/* Keep flyouts and the mobile menu attached to the new header edge. */
@media (min-width:901px){
.nav-dropdown--mega .nav-dropdown__panel,
.nav-dropdown--mega .nav-dropdown__panel.mega-menu--visual,
.nav-dropdown--services .mega-menu--services-v4,
.nav-dropdown--academy .nav-dropdown__panel,
.nav-dropdown--about .nav-dropdown__panel{
top:var(--evb-header-height) !important;
}
}
@media (max-width:900px){
.mobile-menu{
top:var(--evb-header-height) !important;
max-height:calc(100vh - var(--evb-header-height)) !important;
}
}
/* Preserve the transparent-header overlap using the actual header height. */
.home-page .hero{
margin-top:calc(0px - var(--evb-header-height)) !important;
padding-top:calc(var(--hero-pad-top,112px) + var(--evb-header-height)) !important;
}
body:not(.home-page) main > section:first-child{
margin-top:calc(0px - var(--evb-header-height)) !important;
}
.ai-evb-page main > section:first-child{
padding-top:calc(clamp(92px,10vw,140px) + var(--evb-header-height)) !important;
}
.multipage:not(.tool-page) main > section:first-child{
padding-top:calc(96px + var(--evb-header-height)) !important;
}
.tool-page main > section:first-child{
padding-top:calc(72px + var(--evb-header-height)) !important;
}
@media (max-width:1024px){
.home-page .hero{
margin-top:calc(0px - var(--evb-header-height)) !important;
padding-top:calc(var(--hero-pad-top,104px) + var(--evb-header-height)) !important;
}
.ai-evb-page main > section:first-child{
padding-top:calc(clamp(84px,10vw,124px) + var(--evb-header-height)) !important;
}
.multipage:not(.tool-page) main > section:first-child{
padding-top:calc(88px + var(--evb-header-height)) !important;
}
}
@media (max-width:760px){
.home-page .hero{
margin-top:calc(0px - var(--evb-header-height)) !important;
padding-top:calc(var(--hero-pad-top,96px) + var(--evb-header-height)) !important;
}
.ai-evb-page main > section:first-child,
.multipage:not(.tool-page) main > section:first-child,
.tool-page main > section:first-child{
padding-top:calc(78px + var(--evb-header-height)) !important;
}
}
/* /v69 — Codex marketing header height */
/* v70 — Codex Hero video background on the homepage, matching ai/sales.html. */
.home-page .hero{
background:#fff !important;
border-bottom:0 !important;
}
.home-page .hero::before,
.home-page .hero::after{
content:none !important;
display:none !important;
}
.home-page .hero__codex-bg{
position:absolute;
inset:0;
z-index:0;
height:1000px;
overflow:hidden;
pointer-events:none;
-webkit-mask-image:linear-gradient(to bottom, black 0px, transparent 100%);
mask-image:linear-gradient(to bottom, black 0px, transparent 100%);
-webkit-mask-repeat:no-repeat;
mask-repeat:no-repeat;
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
-webkit-mask-position:0 0;
mask-position:0 0;
}
.home-page .hero__codex-video{
display:block;
width:100%;
height:100%;
object-fit:cover;
}
.home-page .hero > .container{
position:relative !important;
z-index:10 !important;
}
/* v71 — mobile header optical symmetry.
Keep the original APNG animation, but crop its unequal transparent canvas in CSS. */
@media (max-width:1180px){
.site-header .header__inner{
box-sizing:border-box !important;
width:100% !important;
max-width:100% !important;
padding-inline:16px !important;
margin-inline:0 !important;
gap:12px !important;
}
.site-header .brand,
.site-header .header__inner > .brand,
header.site-header .brand{
position:relative !important;
width:160px !important;
min-width:160px !important;
max-width:160px !important;
height:52px !important;
flex:0 0 160px !important;
margin:0 !important;
overflow:hidden !important;
}
.site-header .brand-video,
.site-header .brand-video.brand-logo-apng,
.site-header .brand > .brand-video.brand-logo-apng,
.site-header .header__inner > .brand > .brand-video.brand-logo-apng{
position:absolute !important;
left:-38px !important;
top:50% !important;
display:block !important;
width:254px !important;
min-width:254px !important;
max-width:none !important;
height:auto !important;
margin:0 !important;
object-fit:contain !important;
transform:translateY(-50%) !important;
}
.site-header .burger{
flex:0 0 40px !important;
width:40px !important;
min-width:40px !important;
height:40px !important;
margin-left:auto !important;
margin-right:0 !important;
padding:0 !important;
}
.site-header .burger span{
width:24px !important;
}
.site-header .mobile-menu{
left:16px !important;
right:16px !important;
width:auto !important;
max-width:calc(100vw - 32px) !important;
}
}
@media (max-width:420px){
.site-header .header__inner{
padding-inline:12px !important;
}
.site-header .brand,
.site-header .header__inner > .brand,
header.site-header .brand{
width:146px !important;
min-width:146px !important;
max-width:146px !important;
flex-basis:146px !important;
}
.site-header .brand-video,
.site-header .brand-video.brand-logo-apng,
.site-header .brand > .brand-video.brand-logo-apng,
.site-header .header__inner > .brand > .brand-video.brand-logo-apng{
left:-34px !important;
width:232px !important;
min-width:232px !important;
}
.site-header .mobile-menu{
left:12px !important;
right:12px !important;
max-width:calc(100vw - 24px) !important;
}
}
/* v72 — Home CTA geometry matched to the saved Codex CTA.
Source layout: column, 24px gaps, 128px top / 96px bottom,
full-width content with responsive horizontal padding. */
.home-page #request.cta-section{
padding:0 !important;
}
.home-page #request .cta__box{
position:relative !important;
z-index:10 !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
justify-content:space-between !important;
gap:24px !important;
width:100% !important;
max-width:none !important;
min-height:0 !important;
margin:0 auto !important;
padding:128px 56px 96px !important;
box-sizing:border-box !important;
text-align:center !important;
}
.home-page #request .cta__box > div{
display:contents;
}
.home-page #request .cta__box h2{
margin:0 !important;
max-width:100% !important;
text-align:center !important;
}
.home-page #request .cta__box p{
width:100% !important;
max-width:896px !important;
margin:0 !important;
text-align:center !important;
}
.home-page #request .cta__box > .btn{
width:auto !important;
max-width:100% !important;
margin:0 !important;
}
@media (max-width:1023px){
.home-page #request .cta__box{
padding-right:40px !important;
padding-left:40px !important;
}
}
@media (max-width:767px){
.home-page #request .cta__box{
padding-right:24px !important;
padding-left:24px !important;
}
}
/* v76 — Home CTA without any mask.
Video remains fully visible across the entire CTA height. */
.home-page #faq + #request,
.home-page #request.cta-section{
border-top:0 !important;
border-bottom:0 !important;
}
.home-page #request .cta-codex-bg{
inset:0 !important;
}
.home-page #request .cta-codex-bg__mask{
width:100% !important;
height:100% !important;
overflow:hidden !important;
-webkit-mask:none !important;
mask:none !important;
-webkit-mask-image:none !important;
mask-image:none !important;
}
/* v78 acceleration menu preview */
@media (min-width:1051px){
.mega-menu--services-v4:has(.services-v4-card--acceleration:hover) .services-v4-preview__image--acceleration,
.mega-menu--services-v4:has(.services-v4-card--acceleration:focus-within) .services-v4-preview__image--acceleration,
.mega-menu--services-v4:has(.services-v4-card--acceleration:hover) .services-v4-preview__caption--acceleration,
.mega-menu--services-v4:has(.services-v4-card--acceleration:focus-within) .services-v4-preview__caption--acceleration{opacity:1;visibility:visible;transform:none;pointer-events:auto;}
}
/* Full public brand name in the existing hero layout */
.hero h1 .brand-name{display:inline-block;white-space:nowrap;font-size:.82em;letter-spacing:-.045em}
/* MANAGEMENT SYSTEM TOP MENU — 8 contours */
@media (min-width:1181px){
.nav-dropdown--services .mega-menu--services-v4{
width:min(1440px, calc(100vw - 36px)) !important;
max-width:1440px !important;
max-height:calc(100vh - 100px) !important;
overflow-y:auto !important;
overscroll-behavior:contain;
}
.services-v4-layout{
grid-template-columns:minmax(0,1fr) 320px !important;
align-items:start;
}
.services-v4-groups{
grid-template-columns:repeat(4,minmax(0,1fr)) !important;
gap:10px !important;
}
.services-v4-section-label{
grid-column:1/-1;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:18px;
padding:2px 4px 4px;
}
.services-v4-section-label--secondary{
margin-top:7px;
padding-top:14px;
border-top:1px solid #e4edf8;
}
.services-v4-section-label strong{
color:#162a4b;
font-size:14px;
line-height:1.2;
font-weight:950;
letter-spacing:-.015em;
}
.services-v4-section-label span{
color:#738198;
font-size:12px;
line-height:1.25;
font-weight:750;
text-align:right;
}
.services-v4-card--contour{
min-height:152px !important;
}
.services-v4-card--secondary{
min-height:112px !important;
}
.services-v4-card__links{
align-content:flex-start;
}
.services-v4-card__links a{
white-space:normal !important;
}
.services-v4-preview{
position:sticky !important;
top:18px;
min-height:560px;
}
.services-v4-preview__image--architecture,
.services-v4-preview__caption--architecture{
opacity:1;
transform:translateY(0) scale(1);
}
.mega-menu--services-v4:has(.services-v4-card:hover) .services-v4-preview__image--architecture,
.mega-menu--services-v4:has(.services-v4-card:focus-within) .services-v4-preview__image--architecture,
.mega-menu--services-v4:has(.services-v4-card:hover) .services-v4-preview__caption--architecture,
.mega-menu--services-v4:has(.services-v4-card:focus-within) .services-v4-preview__caption--architecture{
opacity:0;
}
.mega-menu--services-v4:has(.services-v4-card--architecture:hover) .services-v4-preview__image--architecture,
.mega-menu--services-v4:has(.services-v4-card--architecture:focus-within) .services-v4-preview__image--architecture,
.mega-menu--services-v4:has(.services-v4-card--architecture:hover) .services-v4-preview__caption--architecture,
.mega-menu--services-v4:has(.services-v4-card--architecture:focus-within) .services-v4-preview__caption--architecture,
.mega-menu--services-v4:has(.services-v4-card--people:hover) .services-v4-preview__image--people,
.mega-menu--services-v4:has(.services-v4-card--people:focus-within) .services-v4-preview__image--people,
.mega-menu--services-v4:has(.services-v4-card--people:hover) .services-v4-preview__caption--people,
.mega-menu--services-v4:has(.services-v4-card--people:focus-within) .services-v4-preview__caption--people,
.mega-menu--services-v4:has(.services-v4-card--learning:hover) .services-v4-preview__image--learning,
.mega-menu--services-v4:has(.services-v4-card--learning:focus-within) .services-v4-preview__image--learning,
.mega-menu--services-v4:has(.services-v4-card--learning:hover) .services-v4-preview__caption--learning,
.mega-menu--services-v4:has(.services-v4-card--learning:focus-within) .services-v4-preview__caption--learning,
.mega-menu--services-v4:has(.services-v4-card--regular:hover) .services-v4-preview__image--regular,
.mega-menu--services-v4:has(.services-v4-card--regular:focus-within) .services-v4-preview__image--regular,
.mega-menu--services-v4:has(.services-v4-card--regular:hover) .services-v4-preview__caption--regular,
.mega-menu--services-v4:has(.services-v4-card--regular:focus-within) .services-v4-preview__caption--regular,
.mega-menu--services-v4:has(.services-v4-card--execution:hover) .services-v4-preview__image--execution,
.mega-menu--services-v4:has(.services-v4-card--execution:focus-within) .services-v4-preview__image--execution,
.mega-menu--services-v4:has(.services-v4-card--execution:hover) .services-v4-preview__caption--execution,
.mega-menu--services-v4:has(.services-v4-card--execution:focus-within) .services-v4-preview__caption--execution,
.mega-menu--services-v4:has(.services-v4-card--quality:hover) .services-v4-preview__image--quality,
.mega-menu--services-v4:has(.services-v4-card--quality:focus-within) .services-v4-preview__image--quality,
.mega-menu--services-v4:has(.services-v4-card--quality:hover) .services-v4-preview__caption--quality,
.mega-menu--services-v4:has(.services-v4-card--quality:focus-within) .services-v4-preview__caption--quality,
.mega-menu--services-v4:has(.services-v4-card--metrics:hover) .services-v4-preview__image--metrics,
.mega-menu--services-v4:has(.services-v4-card--metrics:focus-within) .services-v4-preview__image--metrics,
.mega-menu--services-v4:has(.services-v4-card--metrics:hover) .services-v4-preview__caption--metrics,
.mega-menu--services-v4:has(.services-v4-card--metrics:focus-within) .services-v4-preview__caption--metrics,
.mega-menu--services-v4:has(.services-v4-card--commercial:hover) .services-v4-preview__image--commercial,
.mega-menu--services-v4:has(.services-v4-card--commercial:focus-within) .services-v4-preview__image--commercial,
.mega-menu--services-v4:has(.services-v4-card--commercial:hover) .services-v4-preview__caption--commercial,
.mega-menu--services-v4:has(.services-v4-card--commercial:focus-within) .services-v4-preview__caption--commercial,
.mega-menu--services-v4:has(.services-v4-card--strategy:hover) .services-v4-preview__image--strategy,
.mega-menu--services-v4:has(.services-v4-card--strategy:focus-within) .services-v4-preview__image--strategy,
.mega-menu--services-v4:has(.services-v4-card--strategy:hover) .services-v4-preview__caption--strategy,
.mega-menu--services-v4:has(.services-v4-card--strategy:focus-within) .services-v4-preview__caption--strategy,
.mega-menu--services-v4:has(.services-v4-card--acceleration:hover) .services-v4-preview__image--acceleration,
.mega-menu--services-v4:has(.services-v4-card--acceleration:focus-within) .services-v4-preview__image--acceleration,
.mega-menu--services-v4:has(.services-v4-card--acceleration:hover) .services-v4-preview__caption--acceleration,
.mega-menu--services-v4:has(.services-v4-card--acceleration:focus-within) .services-v4-preview__caption--acceleration,
.mega-menu--services-v4:has(.services-v4-card--ai:hover) .services-v4-preview__image--ai,
.mega-menu--services-v4:has(.services-v4-card--ai:focus-within) .services-v4-preview__image--ai,
.mega-menu--services-v4:has(.services-v4-card--ai:hover) .services-v4-preview__caption--ai,
.mega-menu--services-v4:has(.services-v4-card--ai:focus-within) .services-v4-preview__caption--ai,
.mega-menu--services-v4:has(.services-v4-card--crisis:hover) .services-v4-preview__image--crisis,
.mega-menu--services-v4:has(.services-v4-card--crisis:focus-within) .services-v4-preview__image--crisis,
.mega-menu--services-v4:has(.services-v4-card--crisis:hover) .services-v4-preview__caption--crisis,
.mega-menu--services-v4:has(.services-v4-card--crisis:focus-within) .services-v4-preview__caption--crisis,
.mega-menu--services-v4:has(.services-v4-card--scaling:hover) .services-v4-preview__image--scaling,
.mega-menu--services-v4:has(.services-v4-card--scaling:focus-within) .services-v4-preview__image--scaling,
.mega-menu--services-v4:has(.services-v4-card--scaling:hover) .services-v4-preview__caption--scaling,
.mega-menu--services-v4:has(.services-v4-card--scaling:focus-within) .services-v4-preview__caption--scaling{
opacity:1;
transform:translateY(0) scale(1);
}
}
@media (max-width:1180px){
.mobile-industry-intro--secondary{
margin-top:16px;
padding-top:18px;
border-top:1px solid rgba(15,87,230,.14);
}
}
/* /MANAGEMENT SYSTEM TOP MENU — 8 contours */
@media (min-width:1181px){
.services-v4-card__title{
white-space:normal !important;
overflow-wrap:anywhere;
font-size:15px !important;
min-height:36px;
}
}
@media (min-width:1181px){
.mega-menu--services-v4 .services-v4-preview__image,
.mega-menu--services-v4 .services-v4-preview__caption{
opacity:0 !important;
}
.mega-menu--services-v4 .services-v4-preview__image.is-preview-active,
.mega-menu--services-v4 .services-v4-preview__caption.is-preview-active{
opacity:1 !important;
transform:translateY(0) scale(1) !important;
}
}
/* SIMPLIFIED MANAGEMENT SYSTEM MENU — ONE SECTION */
.services-v4-card--system-flat{
grid-column:1/-1;
min-height:auto !important;
}
.services-v4-card--system-flat .services-v4-card__links--system{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:8px 12px;
margin-top:0;
padding-top:12px;
}
.services-v4-card--system-flat .services-v4-card__links--system a{
display:flex !important;
align-items:center;
min-height:38px;
padding:8px 10px !important;
border:1px solid #e4ebf7;
border-radius:10px !important;
background:#fff !important;
white-space:normal !important;
}
.services-v4-card--system-flat .services-v4-card__links--system a:hover,
.services-v4-card--system-flat .services-v4-card__links--system a:focus-visible{
border-color:#b8c8ff;
background:#f0f4ff !important;
}
@media (max-width:1280px) and (min-width:1051px){
.services-v4-card--system-flat .services-v4-card__links--system{grid-template-columns:repeat(2,minmax(0,1fr));}
}
/* SYSTEM MANAGEMENT MAIN PAGE LINK — menu hierarchy */
.services-v4-section-label__main{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:18px;
width:100%;
color:inherit;
text-decoration:none;
border-radius:10px;
transition:background .18s ease, color .18s ease;
}
.services-v4-section-label__main:hover strong,
.services-v4-section-label__main:focus-visible strong{
color:#2553e8;
}
.services-v4-section-label__main:focus-visible{
outline:2px solid rgba(37,83,232,.32);
outline-offset:4px;
}
@media(max-width:1180px){
.mobile-system-card__head{
display:grid;
grid-template-columns:minmax(0,1fr) 46px;
align-items:stretch;
}
.mobile-system-card__main{
display:grid;
grid-template-columns:112px minmax(0,1fr);
align-items:center;
gap:12px;
min-height:86px;
padding:10px 4px 10px 10px;
color:inherit;
text-decoration:none;
}
.mobile-system-card__main:hover .mobile-industry-card__body strong,
.mobile-system-card__main:focus-visible .mobile-industry-card__body strong{
color:#2553e8;
}
.mobile-system-card__main:focus-visible{
outline:2px solid rgba(37,83,232,.32);
outline-offset:-3px;
border-radius:14px;
}
.mobile-system-card__toggle{
display:grid;
place-items:center;
border:0;
border-left:1px solid #edf2f9;
background:transparent;
cursor:pointer;
}
.mobile-system-card__toggle:hover,
.mobile-system-card__toggle:focus-visible{
background:#f5f8ff;
}
.mobile-system-card__toggle:focus-visible{
outline:2px solid rgba(37,83,232,.32);
outline-offset:-3px;
}
.mobile-system-card.is-open{
border-color:#c8daf6;
box-shadow:0 10px 26px rgba(15,23,42,.07);
}
.mobile-system-card.is-open .mobile-industry-card__arrow{
transform:rotate(-135deg);
}
.mobile-system-card__links[hidden]{
display:none !important;
}
}
/* /SYSTEM MANAGEMENT MAIN PAGE LINK */
/* SYSTEM MANAGEMENT MAIN PAGE LINK — desktop title spacing */
@media(min-width:1181px){
.services-v4-section-label__main strong{
flex:0 0 auto;
margin-right:18px;
}
.services-v4-section-label__main span{
margin-left:auto;
}
}
/* /SYSTEM MANAGEMENT MAIN PAGE LINK — desktop title spacing */
/* ACADEMY PRODUCT ARCHITECTURE 2026 */
@media (min-width:1181px){
.nav-dropdown--academy .nav-dropdown__panel{max-height:calc(100vh - 100px);overflow-y:auto;overscroll-behavior:contain}
.academy-mega-feature{height:470px;min-height:470px}
.academy-mega-list a{min-height:82px}
}
.academy-card-link{display:inline-flex;margin-top:18px;color:#2553e8;font-weight:850;text-decoration:none}
.academy-card-link:hover{text-decoration:underline}
.academy-table-wrap{overflow:auto;border:1px solid #dfe8fa;border-radius:18px;background:#fff;box-shadow:var(--shadow-card)}
.academy-compare{width:100%;min-width:1040px;border-collapse:collapse;font-size:14px}
.academy-compare th,.academy-compare td{padding:15px 14px;border-bottom:1px solid #e8eef8;border-right:1px solid #edf2f8;text-align:left;vertical-align:top}
.academy-compare th{position:sticky;top:0;background:#f3f7ff;color:#0f172a;font-weight:900;z-index:1}
.academy-compare th:first-child,.academy-compare td:first-child{position:sticky;left:0;background:#fff;font-weight:800;min-width:190px;z-index:2}
.academy-compare thead th:first-child{background:#f3f7ff;z-index:3}
.academy-compare tr:last-child td{border-bottom:0}
.academy-faq-list{max-width:900px;margin:0 auto;display:grid;gap:12px}
.academy-faq-item{border:1px solid #e2e8f0;border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.05);overflow:hidden}
.academy-faq-item summary{cursor:pointer;list-style:none;padding:20px 54px 20px 22px;font-weight:850;color:#0f172a;position:relative}
.academy-faq-item summary::-webkit-details-marker{display:none}
.academy-faq-item summary::after{content:'+';position:absolute;right:22px;top:50%;transform:translateY(-50%);font-size:24px;color:#2553e8}
.academy-faq-item[open] summary::after{content:'−'}
.academy-faq-item div{padding:0 22px 20px;color:#56677f;line-height:1.65}
@media(max-width:700px){.academy-compare{font-size:13px}.academy-compare th,.academy-compare td{padding:12px 10px}.academy-mega-feature{height:auto;min-height:0}}