body { margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; } .sol-hero {
position: relative;
overflow: hidden;
background: #024959;
min-height: 560px;
display: flex;
flex-direction: column;
}
.sol-hero__bg {
position: absolute;
inset: 0;
background: url(//max.migraven.com/wp-content/themes/hello-theme-child-master/img/hf_20260410_210446_bb6aab9b-d341-4837-a277-dd6587218734.png) no-repeat top center / cover;
z-index: 0;
mix-blend-mode: screen;
opacity: 0.6;
-webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}
.sol-hero__bg-fade {
display: none;
} .sol-hero__nav {
position: fixed;
top: 16px;
left: 50%;
transform: translateX(-50%);
box-sizing: border-box;
width: calc(100% - 40px);
max-width: 1200px;
z-index: 200;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px;
background: transparent;
border-radius: 18px;
transition: background 0.35s ease, box-shadow 0.35s ease,
border-color 0.35s ease;
}
.sol-hero__nav--scrolled {
background: rgba(1, 35, 45, 0.82);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(255,255,255,0.12);
box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.sol-hero__nav-left {
display: flex;
align-items: center;
gap: 40px;
}
.sol-hero__logo {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}
.sol-hero__logo-icon {
width: 34px;
height: 34px;
background: rgba(255,255,255,0.15);
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sol-hero__logo-icon svg {
width: 18px;
height: 18px;
}
.sol-hero__logo-text {
font-family: 'Roboto', sans-serif;
font-size: 19px;
font-weight: 700;
color: #ffffff;
letter-spacing: -0.05em;
}
.sol-hero__nav-links {
display: flex;
align-items: center;
gap: 28px;
}
.sol-hero__nav-links a {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
color: rgba(255,255,255,0.72);
text-decoration: none;
transition: color 0.2s;
}
.sol-hero__nav-links a:hover {
color: #ffffff;
}
.sol-hero__nav-links .nav-active {
background: rgba(255,255,255,0.12);
color: #ffffff;
padding: 6px 14px;
border-radius: 10px;
}
.sol-hero__nav-right {
display: flex;
align-items: center;
gap: 12px;
} .sol-hero__nav-right .btn--cta {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 600;
padding: 10px 22px;
background: #ffffff;
color: #024959;
border: none;
border-radius: 10px;
text-decoration: none;
display: inline-block;
transition: background 0.2s, color 0.2s, opacity 0.2s;
}
.sol-hero__nav-right .btn--cta:hover {
opacity: 0.88;
} .sol-hero__hamburger {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 36px;
height: 36px;
background: none;
border: none;
cursor: pointer;
padding: 4px;
margin-left: 8px;
}
.sol-hero__hamburger span {
display: block;
height: 2px;
background: #ffffff;
border-radius: 2px;
transition: transform 0.25s, opacity 0.25s, width 0.25s;
}
.sol-hero__hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.sol-hero__hamburger.open span:nth-child(2) {
opacity: 0;
}
.sol-hero__hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
} .sol-hero__mobile-menu {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 199;
padding: 90px 28px 32px;
background: rgba(1, 35, 45, 0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255,255,255,0.1);
flex-direction: column;
gap: 8px;
}
.sol-hero__mobile-menu.open {
display: flex;
}
.sol-hero__mobile-menu a {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 500;
color: rgba(255,255,255,0.8);
text-decoration: none;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.sol-hero__mobile-menu a.nav-active {
color: #ffffff;
}
.sol-hero__mobile-cta {
margin-top: 16px;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 600;
text-align: center;
padding: 14px 24px;
background: #ffffff;
color: #024959;
border-radius: 12px;
text-decoration: none;
}
@media (max-width: 860px) {
.sol-hero__nav { padding: 16px 24px; }
.sol-hero__nav-links { display: none; }
.sol-hero__nav-right .btn--cta { display: none; }
.sol-hero__hamburger { display: flex; }
} .nav-dropdown {
position: relative;
}
.nav-dropdown__trigger {
display: flex;
align-items: center;
gap: 4px;
}
.nav-dropdown__menu {
display: none;
position: absolute;
top: 100%;
left: 0;
min-width: 160px;
padding-top: 10px; z-index: 300;
}
.nav-dropdown__menu-inner {
background: rgba(1, 35, 45, 0.95);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(255,255,255,0.12);
border-radius: 12px;
padding: 6px;
box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.nav-dropdown__menu-inner a {
display: block;
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 500;
color: rgba(255,255,255,0.8) !important;
padding: 9px 14px;
border-radius: 8px;
text-decoration: none;
transition: background 0.15s, color 0.15s;
}
.nav-dropdown__menu-inner a:hover {
background: rgba(255,255,255,0.1);
color: #ffffff !important;
}
.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown.open .nav-dropdown__menu {
display: block;
} #tab-sticky-bar {
position: fixed;
top: 97px; left: 50%;
transform: translateX(-50%) translateY(-6px);
box-sizing: border-box;
width: calc(100% - 40px);
max-width: 1200px;
z-index: 190;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 18px;
padding: 5px;
display: flex;
gap: 4px;
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
box-shadow: 0 4px 24px rgba(0,0,0,0.1);
}
#tab-sticky-bar.visible {
opacity: 1;
pointer-events: auto;
transform: translateX(-50%) translateY(0);
}
.tab-sticky-btn {
flex: 1;
background: transparent;
border: none;
border-radius: 13px;
color: rgba(2, 73, 89, 0.5);
font-family: 'Roboto', sans-serif;
font-size: 13px;
font-weight: 500;
padding: 10px 16px;
cursor: pointer;
transition: background 0.2s, color 0.2s;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
letter-spacing: 0.01em;
}
.tab-sticky-btn:hover {
color: #024959;
background: rgba(2, 73, 89, 0.06);
}
.tab-sticky-btn--active {
background: #024959;
color: #ffffff;
font-weight: 600;
}
.sol-hero__content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
gap: 32px;
padding: 160px 80px 100px;
text-align: center;
max-width: 1280px;
margin: 0 auto;
}
.sol-hero__title {
font-family: 'Roboto', sans-serif;
font-size: 52px;
font-weight: 600;
font-style: normal;
line-height: 1.1;
letter-spacing: -0.02em;
color: #ffffff;
margin: 0;
}
.sol-hero__title em {
font-weight: 300;
font-style: italic;
}
.sol-hero__subtitle {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
color: rgba(255,255,255,0.6);
line-height: 1.6;
margin: 0;
max-width: 720px;
}
.sol-hero__actions {
display: flex;
gap: 16px;
align-items: center;
} .sol-hero__integrations {
position: relative;
width: 100%;
max-width: 860px;
margin-top: 20px;
}
.sol-hero__integrations-label {
font-family: 'Roboto', sans-serif;
font-size: 12px;
font-weight: 500;
color: rgba(255,255,255,0.4);
letter-spacing: 0.1em;
text-transform: uppercase;
text-align: center;
margin-bottom: 20px;
}
.sol-hero__int-grid {
position: relative;
display: grid;
grid-template-columns: repeat(4, 1fr);
border-left: 1px solid rgba(255,255,255,0.14);
border-top: 1px solid rgba(255,255,255,0.14);
} .sol-hero__int-grid::before,
.sol-hero__int-grid::after {
content: '';
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 100vw;
height: 1px;
background: rgba(255,255,255,0.14);
pointer-events: none;
}
.sol-hero__int-grid::before { top: -1px; }
.sol-hero__int-grid::after  { bottom: -1px; }
.sol-hero__int-cell {
position: relative;
border-right: 1px solid rgba(255,255,255,0.14);
border-bottom: 1px solid rgba(255,255,255,0.14);
padding: 22px 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 500;
color: rgba(255,255,255,0.7);
line-height: 1.3;
gap: 8px;
transition: background 0.2s, color 0.2s;
}
.sol-hero__int-cell:hover {
background: rgba(255,255,255,0.07);
color: #ffffff;
}
.sol-hero__int-cell--hi {
background: rgba(255,255,255,0.07);
}
.sol-hero__int-cell svg {
flex-shrink: 0;
opacity: 0.55;
} .sol-hero__int-plus {
position: absolute;
z-index: 2;
color: rgba(255,255,255,0.3);
pointer-events: none;
} .sol-mehr {
padding: 40px 0 80px;
}
.sol-mehr__card {
width: calc(100% - 160px);
max-width: 1120px;
margin: 0 auto;
background: #F9FAFB;
border: 1px solid #D9D9D9;
border-radius: 32px;
padding: 80px;
overflow: hidden;
}
.sol-mehr__heading {
text-align: center;
margin-bottom: 60px;
display: flex;
flex-direction: column;
gap: 12px;
}
.sol-mehr__title {
font-family: 'Roboto', sans-serif;
font-size: 60px;
font-weight: 300;
font-style: italic;
letter-spacing: -0.03em;
color: #151515;
line-height: 1.15;
margin: 0;
}
.sol-mehr__title strong {
font-weight: 600;
font-style: normal;
}
.sol-mehr__subtitle {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
color: #98A2B3;
margin: 0;
line-height: 1.6;
}
.sol-mehr__body {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: 60px;
align-items: center;
}
.sol-mehr__left {
display: flex;
flex-direction: column;
gap: 0;
}
.sol-mehr__badge {
width: 32px;
height: 32px;
background: #024959;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 32px;
flex-shrink: 0;
}
.sol-mehr__badge img {
width: 22px;
height: 22px;
object-fit: contain;
}
.sol-mehr__features {
display: flex;
flex-direction: column;
gap: 40px;
}
.sol-mehr__feature {
display: flex;
flex-direction: column;
gap: 4px;
}
.sol-mehr__feature-row {
display: flex;
align-items: center;
gap: 10px;
}
.sol-mehr__feature-icon {
width: 40px;
height: 40px;
flex-shrink: 0;
}
.sol-mehr__feature-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.sol-mehr__feature-title {
font-family: 'Roboto', sans-serif;
font-size: 40px;
font-weight: 500;
color: #08141E;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
}
.sol-mehr__feature-desc {
font-family: 'Roboto', sans-serif;
font-size: 16px;
color: #98A2B3;
line-height: 1.5;
margin: 0;
padding-left: 50px;
} .sol-mehr__visual {
position: relative;
padding-bottom: 64px;
margin-right: -80px;
margin-top: -40px;
margin-bottom: -40px;
}
.sol-mehr__screenshot-wrap {
border-radius: 15px 0 0 15px;
overflow: hidden;
box-shadow: -4px 4px 10px rgba(0,0,0,0.15);
}
.sol-mehr__screenshot {
display: block;
width: 100%;
height: auto;
}
.sol-mehr__info-card {
position: absolute;
bottom: 0;
left: 12px;
right: 12px;
background: #fff;
border: 1px solid #CCD6DD;
border-radius: 20px;
box-shadow: 0 0 8px rgba(181,181,181,0.25);
padding: 16px 20px;
display: flex;
gap: 20px;
align-items: center;
}
.sol-mehr__info-icon {
width: 52px;
height: 52px;
background: #024959;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.sol-mehr__info-icon img {
width: 32px;
height: 32px;
object-fit: contain;
}
.sol-mehr__info-text strong {
display: block;
font-family: 'Manrope', sans-serif;
font-size: 15px;
font-weight: 700;
color: #08141E;
margin-bottom: 2px;
}
.sol-mehr__info-text p {
font-family: 'Roboto', sans-serif;
font-size: 14px;
color: #08141E;
margin: 0;
line-height: 1.4;
} .sol-pitch {
padding: 180px 80px 80px; }
.sol-pitch__card {
width: calc(100% - 160px);
max-width: 1120px;
margin: 0 auto;
background: #024959;
border-radius: 32px;
padding: 60px 80px 0 420px; display: flex;
align-items: center;
min-height: 386px;
position: relative;
overflow: visible;
}
.sol-pitch__avatar {
position: absolute;
bottom: 0;
left: 40px;
width: 360px;
height: auto;
}
.sol-pitch__text {
padding: 40px 0 60px;
display: flex;
flex-direction: column;
gap: 20px;
}
.sol-pitch__text p {
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 400;
color: #ffffff;
line-height: 1.45;
margin: 0;
} .sol-use {
padding: 40px 0 120px;
}
.sol-use__inner {
width: calc(100% - 160px);
max-width: 1120px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 24px;
} .sol-use__triggers {
display: flex;
gap: 20px;
}
.sol-use__trigger {
flex: 1;
border: none;
border-radius: 30px;
cursor: pointer;
text-align: left;
background: #f9fafb;
box-shadow: 0 0 10px rgba(0,0,0,0.15);
padding: 26px 24px 26px 0;
display: flex;
align-items: center;
gap: 0;
min-height: 160px;
position: relative;
overflow: hidden;
transition: background 0.2s;
}
.sol-use__trigger--active {
background: #024959;
}
.sol-use__trigger-deco {
width: 100px;
height: 130px;
flex-shrink: 0;
display: flex;
align-items: flex-end;
justify-content: center;
padding-bottom: 0;
}
.sol-use__trigger-deco img {
width: 80px;
height: 110px;
object-fit: contain;
}
.sol-use__trigger-body {
flex: 1;
}
.sol-use__trigger-title {
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1.3;
color: #08141E;
margin: 0 0 14px;
}
.sol-use__trigger--active .sol-use__trigger-title {
color: #ffffff;
}
.sol-use__trigger-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 3px;
}
.sol-use__trigger-list li {
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 500;
color: #08141E;
line-height: 1.6;
}
.sol-use__trigger--active .sol-use__trigger-list li {
color: #ffffffcc;
} .sol-use__panel {
display: flex;
flex-direction: column;
gap: 24px;
}
.sol-use__panel[hidden] {
display: none;
} .sol-use__intro {
background: #f9fafb;
border-radius: 32px;
box-shadow: 0 0 10px rgba(0,0,0,0.2);
padding: 80px;
text-align: center;
}
.sol-use__intro-title {
font-family: 'Roboto', sans-serif;
font-size: 56px;
font-weight: 500;
letter-spacing: -0.03em;
color: #08141E;
line-height: 1.15;
margin: 0 0 20px;
}
.sol-use__intro-title em {
font-style: italic;
font-weight: 300;
}
.sol-use__intro-desc {
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: #98A2B3;
line-height: 1.6;
margin: 0 auto;
max-width: 760px;
} .sol-use__bento-row {
display: flex;
gap: 24px;
}
.sol-use__feat {
background: #f9fafb;
border-radius: 32px;
overflow: hidden;
flex: 1;
padding: 45px;
display: flex;
flex-direction: column;
gap: 20px;
}
.sol-use__feat--wide {
flex-direction: row;
gap: 80px;
align-items: flex-start;
}
.sol-use__feat--accent {
background: #e7eef3;
}
.sol-use__feat-icon {
width: 72px;
height: 72px;
background: #ffffff;
border-radius: 46px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.sol-use__feat-icon img {
width: 28px;
height: 28px;
object-fit: contain;
}
.sol-use__feat-title {
font-family: 'Roboto', sans-serif;
font-size: 28px;
font-weight: 500;
color: #151515;
letter-spacing: -0.01em;
line-height: 1.3;
margin: 0;
}
.sol-use__feat-desc {
font-family: 'Roboto', sans-serif;
font-size: 18px;
color: #98A2B3;
line-height: 1.65;
margin: 0;
letter-spacing: -0.02em;
}
.sol-use__feat-info {
display: flex;
flex-direction: column;
gap: 20px;
flex: 1;
}
.sol-use__feat-screen-wrap {
background: #CCD6DD;
border-radius: 20px 20px 0 0;
padding: 10px 10px 0;
margin-top: auto;
overflow: hidden;
max-height: 260px;
}
.sol-use__feat-screen {
display: block;
width: 100%;
height: auto;
border-radius: 14px 14px 0 0;
box-shadow: 6px -4px 10px rgba(0,0,0,0.2);
}
.sol-use__feat--wide .sol-use__feat-screen-wrap {
margin-top: 0;
background: none;
padding: 0;
flex-shrink: 0;
width: 400px;
border-radius: 0;
}
.sol-use__feat--wide .sol-use__feat-screen {
border-radius: 12px;
box-shadow: 4px 8px 10px rgba(0,0,0,0.2);
}
.sol-use__cta-bar {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.sol-use__cta-bar .btn {
background: #3396b2;
color: #ffffff;
border: 2px solid rgba(2,73,89,0.3);
display: flex;
align-items: center;
gap: 10px;
} .sol-ki {
padding: 80px 80px 120px;
background: #ffffff;
}
.sol-ki__inner {
max-width: 1280px;
margin: 0 auto;
}
.sol-ki__above {
display: flex;
align-items: flex-end;
}
.sol-ki__spacer {
width: 460px;
flex-shrink: 0;
}
.sol-ki__heading {
flex: 1;
font-family: 'Roboto', sans-serif;
font-size: 52px;
font-weight: 700;
color: #08141E;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
padding-bottom: 36px;
}
.sol-ki__heading em {
font-style: italic;
font-weight: 400;
}
.sol-ki__card {
background: #024959;
border-radius: 32px;
position: relative;
overflow: visible;
padding: 48px 80px 48px 500px;
min-height: 300px;
box-sizing: border-box;
}
.sol-ki__avatar {
position: absolute;
bottom: 0;
left: 20px;
width: 460px;
height: auto;
}
.sol-ki__text {
display: flex;
flex-direction: column;
gap: 20px;
}
.sol-ki__subtitle {
font-family: 'Roboto', sans-serif;
font-size: 22px;
font-weight: 700;
color: #ffffff;
margin: 0;
line-height: 1.3;
}
.sol-ki__subtitle em {
font-style: italic;
font-weight: 400;
}
.sol-ki__text p:not(.sol-ki__subtitle) {
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 400;
color: rgba(255,255,255,0.85);
line-height: 1.65;
margin: 0;
}