body.home,
body.marklis-fp {
--fp-primary: #375A9D;
--fp-primary-dark: #2a4476;
--fp-primary-light: #4a6fb5;
--fp-accent: #C59C53;
--fp-accent-dark: #9D7A3E;
--fp-accent-soft: rgba(197, 156, 83, 0.18);
--fp-bg: #ffffff;
--fp-text: #1c1c1c;
--fp-text-muted: #6b6b6b;
--fp-space: 24px;
--fp-space-lg: 48px;
--fp-space-xl: 80px;
--fp-space-2xl: 128px;
--fp-radius: 8px;
--fp-font: 'M PLUS 1p', 'Noto Sans JP', -apple-system, sans-serif;
--fp-font-display: 'Outfit', 'M PLUS 1p', 'Noto Sans JP', sans-serif;
}
@media (max-width: 768px) {
body.home,
body.marklis-fp {
--fp-space: 16px;
--fp-space-lg: 24px;
--fp-space-xl: 40px;
--fp-space-2xl: 56px;
}
}
@media (min-width: 769px) {
body.home,
body.marklis-fp {
--fp-space: 32px;
--fp-space-lg: 64px;
--fp-space-xl: 100px;
--fp-space-2xl: 160px;
}
} body.home .site-content,
body.home .site-main,
body.marklis-fp .site-content,
body.marklis-fp .site-main { padding: 0 !important; margin: 0 !important; max-width: none !important; overflow: visible !important; }
body.home .site-content > .ast-container,
body.marklis-fp .site-content > .ast-container { max-width: none !important; width: 100% !important; padding: 0 !important; overflow: visible !important; }
body.home,
body.marklis-fp { overflow-x: hidden; }
body.home #page,
body.marklis-fp #page { max-width: none !important; width: 100% !important; overflow: visible !important; }
body.home .ast-site-wrap,
body.marklis-fp .ast-site-wrap { max-width: none !important; overflow: visible !important; }
body.home .fp-root,
body.marklis-fp .fp-root {
font-family: var(--fp-font);
color: var(--fp-text);
width: 100%;
max-width: none;
} body.home .fp-reveal,
body.marklis-fp .fp-reveal {
transition:
opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
transform-origin: center bottom;
}
body.home.fp-js-ready .fp-reveal:not(.is-visible),
body.marklis-fp.fp-js-ready .fp-reveal:not(.is-visible) {
opacity: 0;
transform: translateY(60px) scale(0.94);
}
body.home .fp-reveal.is-visible,
body.marklis-fp .fp-reveal.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
} body.home .fp-btn,
body.marklis-fp .fp-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 26px;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
border-radius: 10px;
transition: all 0.25s ease;
letter-spacing: 0.03em;
}
body.home .fp-btn-primary,
body.marklis-fp .fp-btn-primary {
background: var(--fp-primary);
color: #fff;
border: none;
min-width: 200px;
}
body.home .fp-btn-primary:hover,
body.marklis-fp .fp-btn-primary:hover {
background: var(--fp-primary-dark);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(55, 90, 157, 0.3);
}
body.home .fp-btn-outline,
body.marklis-fp .fp-btn-outline {
background: transparent;
color: var(--fp-primary);
border: 2px solid var(--fp-primary);
min-width: 180px;
}
body.home .fp-btn-outline:hover,
body.marklis-fp .fp-btn-outline:hover {
background: var(--fp-primary);
color: #fff;
transform: translateY(-2px);
}
body.home .fp-btn-lg,
body.marklis-fp .fp-btn-lg { padding: 18px 36px; font-size: 1.05rem; min-width: 240px; } body.home .fp-section-cta,
body.marklis-fp .fp-section-cta {
display: flex;
justify-content: center;
align-items: center;
margin-top: var(--fp-space);
padding-top: 0;
text-align: center;
}
body.home .fp-value .fp-section-cta,
body.marklis-fp .fp-value .fp-section-cta { margin-top: var(--fp-space); justify-content: center; }
body.home .fp-contact .fp-section-cta,
body.marklis-fp .fp-contact .fp-section-cta { margin-top: 0; } body.home .fp-section-header,
body.marklis-fp .fp-section-header {
max-width: 1200px;
margin: 0 auto var(--fp-space-lg);
padding: 0 var(--fp-space);
text-align: center;
}
body.home .fp-section-header .fp-process-main-title,
body.marklis-fp .fp-section-header .fp-process-main-title,
body.home .fp-process-main-title,
body.marklis-fp .fp-process-main-title {
font-family: var(--fp-font-display);
font-size: clamp(2.5rem, 8vw, 5rem);
font-weight: 900;
color: var(--fp-primary);
letter-spacing: 0.08em;
margin: 0 0 12px;
text-transform: uppercase;
position: relative;
padding-bottom: 12px;
}
body.home .fp-section-header .fp-process-main-title::after,
body.marklis-fp .fp-section-header .fp-process-main-title::after,
body.home .fp-process-inner .fp-process-main-title::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 48px;
height: 3px;
background: linear-gradient(90deg, var(--fp-primary), var(--fp-accent));
}
@media (min-width: 769px) {
body.home .fp-section-header .fp-process-main-title,
body.marklis-fp .fp-section-header .fp-process-main-title,
body.home .fp-process-main-title,
body.marklis-fp .fp-process-main-title {
font-size: clamp(2.5rem, 5vw, 4rem);
}
}
body.home .fp-section-header .fp-process-sub,
body.marklis-fp .fp-section-header .fp-process-sub,
body.home .fp-process-sub,
body.marklis-fp .fp-process-sub {
font-family: var(--fp-font);
text-align: center;
font-size: 1rem;
font-weight: 500;
color: #555;
margin: 0;
line-height: 1.7;
letter-spacing: 0.02em;
}
@media (min-width: 769px) {
body.home .fp-section-header .fp-process-sub,
body.marklis-fp .fp-section-header .fp-process-sub,
body.home .fp-process-sub,
body.marklis-fp .fp-process-sub {
font-size: 1.2rem;
}
}
body.home .fp-process-inner .fp-process-main-title,
body.marklis-fp .fp-process-inner .fp-process-main-title {
margin: 0 0 16px;
}
body.home .fp-process-inner .fp-process-sub,
body.marklis-fp .fp-process-inner .fp-process-sub {
margin: 0 0 40px;
}  body.home .fp-hero.fp-hero-minimal,
body.marklis-fp .fp-hero.fp-hero-minimal {
position: relative;
width: 100vw;
max-width: 100vw;
min-width: 100vw;
min-height: 100svh;
min-height: 100dvh;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
left: 0;
transform: none;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 18vh 2vw 6vh;
background: #ffffff;
border: none;
box-sizing: border-box;
overflow: hidden;
} body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-wrap,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-wrap {
width: calc(100% + 4vw);
margin-top: 5.5em;
margin-left: -2vw;
margin-right: -2vw;
padding-top: 0.8em;
overflow: hidden;
pointer-events: none; opacity: 1;
animation: fp-hero-lcp-in 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-track,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-track {
width: 100%;
overflow: hidden;
font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', Meiryo, sans-serif;
font-size: clamp(2rem, 5.5vw, 4rem);
font-weight: 900;
color: #1a1a1a;
letter-spacing: -0.02em;
line-height: 1.1;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-track.fp-hero-marklis-line2,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-track.fp-hero-marklis-line2 {
margin-top: 0.12em;
padding-left: 8%;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-inner {
display: flex;
white-space: nowrap;
width: max-content;
animation: fp-hero-marklis-flow 18s linear infinite;
will-change: transform;
backface-visibility: hidden;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-line2 .fp-hero-marklis-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-line2 .fp-hero-marklis-inner {
animation-duration: 22s;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-group,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-group {
display: flex;
flex: 0 0 auto;
gap: 0.75em;
align-items: center;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-track span:not(.fp-hero-marklis-gap),
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-track span:not(.fp-hero-marklis-gap) {
flex-shrink: 0;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-gap,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-gap {
flex-shrink: 0;
width: 0.75em;
min-width: 0.75em;
display: inline-block;
pointer-events: none;
}
@keyframes fp-hero-marklis-flow {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
}
body.home .fp-hero.fp-hero-minimal .fp-hero-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-inner {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
text-align: left;
transition: transform 0.15s ease-out;
will-change: transform;
} body.home .fp-hero.fp-hero-minimal .fp-hero-label,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-label {
font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', Meiryo, sans-serif;
font-size: clamp(1rem, 2.5vw, 1.25rem);
font-weight: 500;
color: #555;
letter-spacing: 0.2em;
margin: 0.6em 0 0;
padding-top: 0.2em; opacity: 1;
animation: fp-hero-lcp-in 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s both;
} body.home .fp-hero.fp-hero-minimal .fp-hero-title,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-title {
font-family: 'Zen Kaku Gothic New', 'Noto Sans JP', 'Hiragino Sans', Meiryo, sans-serif;
font-size: clamp(1.75rem, 7.5vw, 12rem);
font-weight: 900;
line-height: 0.75;
letter-spacing: -0.02em;
margin: 0;
padding-bottom: 0.8em;
color: #1a1a1a; opacity: 1;
animation: fp-hero-lcp-in 0.6s ease-out 0s forwards;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-line,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-line {
display: block;
white-space: nowrap;
margin-bottom: 0.04em;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-line:last-child,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-line:last-child {
margin-bottom: 0;
} body.home .fp-hero.fp-hero-minimal .fp-hero-title .fp-hero-highlight,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-title .fp-hero-highlight {
color: #1c1c1c;
display: block;
will-change: color;
} body.home .fp-hero.fp-hero-minimal.is-visible .fp-hero-title .fp-hero-highlight,
body.marklis-fp .fp-hero.fp-hero-minimal.is-visible .fp-hero-title .fp-hero-highlight {
animation: fp-hero-flash-end-black 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
}
body.home .fp-hero.fp-hero-minimal.is-visible.fp-hero-flash-end-black .fp-hero-title .fp-hero-highlight,
body.marklis-fp .fp-hero.fp-hero-minimal.is-visible.fp-hero-flash-end-black .fp-hero-title .fp-hero-highlight {
animation: fp-hero-flash-end-black 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
}
body.home .fp-hero.fp-hero-minimal.is-visible.fp-hero-flash-end-orange .fp-hero-title .fp-hero-highlight,
body.marklis-fp .fp-hero.fp-hero-minimal.is-visible.fp-hero-flash-end-orange .fp-hero-title .fp-hero-highlight {
animation: fp-hero-flash-end-orange 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
}
body.home .fp-hero.fp-hero-minimal.is-visible.fp-hero-flash-end-blue .fp-hero-title .fp-hero-highlight,
body.marklis-fp .fp-hero.fp-hero-minimal.is-visible.fp-hero-flash-end-blue .fp-hero-title .fp-hero-highlight {
animation: fp-hero-flash-end-blue 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
} @keyframes fp-hero-lcp-in {
from { transform: translateY(40px); }
to   { transform: translateY(0); }
}
@keyframes fp-hero-fog-in {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
} @keyframes fp-hero-flash-end-black {
0% { color: #1c1c1c; }
12% { color: #0066ff; }
24% { color: #1c1c1c; }
36% { color: #e63900; }
48% { color: #0066ff; }
52% { color: #1c1c1c; }
64% { color: #e63900; }
76% { color: #0066ff; }
88% { color: #e63900; }
100% { color: #1c1c1c; }
}
@keyframes fp-hero-flash-end-orange {
0% { color: #1c1c1c; }
12% { color: #0066ff; }
24% { color: #1c1c1c; }
36% { color: #e63900; }
48% { color: #0066ff; }
52% { color: #e63900; }
64% { color: #1c1c1c; }
76% { color: #0066ff; }
88% { color: #e63900; }
100% { color: #e63900; }
}
@keyframes fp-hero-flash-end-blue {
0% { color: #1c1c1c; }
12% { color: #0066ff; }
24% { color: #1c1c1c; }
36% { color: #e63900; }
48% { color: #0066ff; }
52% { color: #0066ff; }
64% { color: #1c1c1c; }
76% { color: #e63900; }
88% { color: #0066ff; }
100% { color: #0066ff; }
} body.home .fp-hero.fp-hero-minimal,
body.marklis-fp .fp-hero.fp-hero-minimal {
opacity: 1;
}
@media (min-width: 1200px) {
body.home .fp-hero.fp-hero-minimal .fp-hero-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-inner {
max-width: none;
}
}
@media (max-width: 768px) {
body.home .fp-hero.fp-hero-minimal,
body.marklis-fp .fp-hero.fp-hero-minimal {
padding: 12vh 6vw 2vh;
justify-content: flex-start;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-inner {
max-width: none;
} body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-wrap,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-wrap {
width: 140vw;
margin-left: -20vw;
margin-right: -20vw;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-title,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-title {
font-size: clamp(1.65rem, 8.8vw, 5rem);
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-wrap,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-wrap {
margin-top: 4em;
padding-top: 0.6em;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-track,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-track {
font-size: clamp(1.6rem, 5vw, 3rem);
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-inner {
animation-duration: 12s;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-line2 .fp-hero-marklis-inner,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-line2 .fp-hero-marklis-inner {
animation-duration: 15s;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-line2,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-line2 {
padding-left: 6%;
}
body.home .fp-hero.fp-hero-minimal .fp-hero-marklis-group,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-marklis-group {
gap: 0.75em;
}
body.home .fp-card-panels,
body.marklis-fp .fp-card-panels {
padding-top: 12px;
}
}
@media (max-width: 360px) {
body.home .fp-hero.fp-hero-minimal .fp-hero-title,
body.marklis-fp .fp-hero.fp-hero-minimal .fp-hero-title {
font-size: clamp(1.5rem, 8vw, 4rem);
}
} body.home .fp-hero:not(.fp-hero-minimal),
body.marklis-fp .fp-hero:not(.fp-hero-minimal) {
position: relative;
min-height: 100svh;
display: flex;
align-items: stretch;
padding: var(--fp-space-lg);
overflow: hidden;
}
body.home .fp-hero-bg,
body.marklis-fp .fp-hero-bg {
position: absolute;
inset: 0;
z-index: 0;
background: #ffffff;
}
body.home .fp-hero-text-wrap,
body.marklis-fp .fp-hero-text-wrap {
width: 100%;
max-width: none;
padding: 0 var(--fp-space);
}
body.home .fp-hero-scroll,
body.marklis-fp .fp-hero-scroll {
display: none;
} @media (max-width: 768px) {
body.home .fp-hero:not(.fp-hero-minimal),
body.marklis-fp .fp-hero:not(.fp-hero-minimal) {
padding: var(--fp-space-md);
}
}
@media (min-width: 769px) {
body.home .fp-hero,
body.marklis-fp .fp-hero {
padding: var(--fp-space-xl) var(--fp-space) var(--fp-space-xl);
}
body.home .fp-hero-text-wrap,
body.marklis-fp .fp-hero-text-wrap {
width: 100%;
max-width: none;
margin: 0;
padding: 0 var(--fp-space);
}
body.home .fp-hero-title,
body.marklis-fp .fp-hero-title {
font-size: clamp(3rem, 5.5vw, 6rem);
}
body.home .fp-hero-visual,
body.marklis-fp .fp-hero-visual {
min-height: 240px;
}
body.home .fp-hero-image-area.fp-hero-image-fullwidth,
body.marklis-fp .fp-hero-image-area.fp-hero-image-fullwidth {
height: 100%;
min-height: 100%;
}
body.home .fp-btn,
body.marklis-fp .fp-btn {
font-size: 1.05rem;
padding: 16px 30px;
}
body.home .fp-btn-lg,
body.marklis-fp .fp-btn-lg {
font-size: 1.2rem;
padding: 22px 44px;
}
} body.home .fp-card-panels,
body.marklis-fp .fp-card-panels {
padding: var(--fp-space) 0 var(--fp-space-xl);
background: #ffffff;
}
@media (min-width: 769px) {
body.home .fp-hero.fp-hero-minimal,
body.marklis-fp .fp-hero.fp-hero-minimal {
padding-bottom: 12vh;
}
body.home .fp-card-panels,
body.marklis-fp .fp-card-panels {
padding-top: var(--fp-space-lg);
}
}
body.home .fp-card-panels-inner,
body.marklis-fp .fp-card-panels-inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 var(--fp-space);
width: 100%;
}
body.home .fp-card-panels-scroll,
body.marklis-fp .fp-card-panels-scroll {
display: flex;
gap: var(--fp-space);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-bottom: 8px;
margin-right: calc(-1 * var(--fp-space));
padding-left: 0;
padding-right: var(--fp-space);
}
body.home .fp-card-panels-scroll::-webkit-scrollbar,
body.marklis-fp .fp-card-panels-scroll::-webkit-scrollbar { height: 6px; }
body.home .fp-card-panels-scroll::-webkit-scrollbar-track,
body.marklis-fp .fp-card-panels-scroll::-webkit-scrollbar-track { background: rgba(0,0,0,0.04); border-radius: 3px; }
body.home .fp-card-panels-scroll::-webkit-scrollbar-thumb,
body.marklis-fp .fp-card-panels-scroll::-webkit-scrollbar-thumb { background: rgba(197, 156, 83, 0.5); border-radius: 3px; }
body.home .fp-card-panel,
body.marklis-fp .fp-card-panel {
flex: 0 0 min(280px, 75vw);
min-width: 240px;
max-width: 320px;
scroll-snap-align: start;
scroll-snap-stop: always;
display: block;
position: relative;
aspect-ratio: 3 / 4;
border-radius: 20px;
text-decoration: none;
color: inherit;
transition: transform 0.25s ease, box-shadow 0.25s ease;
overflow: visible;
}
body.home .fp-card-panel:hover,
body.marklis-fp .fp-card-panel:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}
body.home .fp-card-panel-img-wrap,
body.marklis-fp .fp-card-panel-img-wrap {
position: absolute;
inset: 0;
border-radius: 20px;
overflow: hidden;
}
body.home .fp-card-panel-img-wrap img,
body.marklis-fp .fp-card-panel-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
body.home .fp-card-panel-overlay,
body.marklis-fp .fp-card-panel-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
padding: 24px var(--fp-space) var(--fp-space);
background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}
body.home .fp-card-panel-title,
body.marklis-fp .fp-card-panel-title {
font-family: var(--fp-font-display);
font-size: 1.15rem;
font-weight: 800;
line-height: 1.35;
color: #fff;
margin: 0 0 4px;
letter-spacing: 0.02em;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
body.home .fp-card-panel-desc,
body.marklis-fp .fp-card-panel-desc {
font-size: 0.85rem;
color: rgba(255,255,255,0.95);
line-height: 1.4;
margin: 0;
}
@media (min-width: 769px) {
body.home .fp-card-panels-scroll,
body.marklis-fp .fp-card-panels-scroll {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--fp-space);
overflow-x: visible;
scroll-snap-type: none;
margin: 0;
padding: 0;
width: 100%;
}
body.home .fp-card-panel,
body.marklis-fp .fp-card-panel {
flex: none;
min-width: 0;
max-width: none;
width: 100%;
scroll-snap-align: none;
}
}
@media (min-width: 1100px) {
body.home .fp-card-panel-title,
body.marklis-fp .fp-card-panel-title { font-size: 1.25rem; }
} body.home .fp-stats,
body.marklis-fp .fp-stats {
padding: var(--fp-space-2xl) var(--fp-space);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.home .fp-hero-minimal + .fp-stats,
body.marklis-fp .fp-hero-minimal + .fp-stats {
border-top: none;
}
body.home .fp-stats-inner,
body.marklis-fp .fp-stats-inner {
max-width: 1100px;
margin: 0 auto;
padding: 0 var(--fp-space);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--fp-space-lg);
text-align: left;
}
body.home .fp-stat,
body.marklis-fp .fp-stat {
display: flex;
flex-direction: column;
gap: 12px;
padding: var(--fp-space-lg) var(--fp-space);
background: #ffffff;
border-radius: var(--fp-radius);
box-shadow: 0 2px 12px rgba(0,0,0,0.04);
border: 1px solid rgba(55, 90, 157, 0.18);
transition: transform 0.2s, box-shadow 0.2s;
}
body.home .fp-stat:hover,
body.marklis-fp .fp-stat:hover {
transform: translateY(-2px);
box-shadow: 0 8px 32px rgba(55, 90, 157, 0.18);
}
body.home .fp-stat-num,
body.marklis-fp .fp-stat-num {
font-family: var(--fp-font-display);
font-size: clamp(3rem, 7vw, 4.5rem);
font-weight: 900;
color: var(--fp-primary);
line-height: 1;
letter-spacing: -0.02em;
}
body.home .fp-stat:nth-child(2) .fp-stat-num,
body.marklis-fp .fp-stat:nth-child(2) .fp-stat-num {
color: var(--fp-accent);
}
@media (min-width: 769px) {
body.home .fp-stat-num,
body.marklis-fp .fp-stat-num { font-size: clamp(3.5rem, 5vw, 5rem); }
body.home .fp-stat-label,
body.marklis-fp .fp-stat-label { font-size: 1.15rem; }
}
body.home .fp-stat-label,
body.marklis-fp .fp-stat-label {
font-size: 1rem;
color: var(--fp-text-muted);
line-height: 1.5;
font-weight: 500;
}
@media (max-width: 600px) {
body.home .fp-stats-inner,
body.marklis-fp .fp-stats-inner { grid-template-columns: 1fr; gap: var(--fp-space); }
body.home .fp-stat,
body.marklis-fp .fp-stat { padding: var(--fp-space); }
} body.home .fp-value,
body.marklis-fp .fp-value {
position: relative;
padding: var(--fp-space-2xl) var(--fp-space);
text-align: center;
max-width: 1200px;
margin: 0 auto;
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
overflow: hidden;
}
body.home .fp-value .fp-section-cta,
body.marklis-fp .fp-value .fp-section-cta {
text-align: center;
justify-content: center;
}
body.home .fp-value-label,
body.marklis-fp .fp-value-label {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 0.78rem;
font-weight: 600;
color: #1c1c1c;
margin: 0 0 18px;
padding: 6px 14px 6px 6px;
background: rgba(0, 0, 0, 0.02);
border-radius: 999px;
letter-spacing: 0.08em;
text-transform: none;
}
body.home .fp-value-label::before,
body.marklis-fp .fp-value-label::before {
content: "";
width: 32px;
height: 18px;
border-radius: 999px;
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-accent) 100%);
opacity: 0.18;
}
body.home .fp-value-title,
body.marklis-fp .fp-value-title {
font-family: var(--fp-font-display);
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 800;
margin: 0 0 24px;
line-height: 1.4;
letter-spacing: 0.02em;
}
body.home .fp-value-title .fp-value-title-line1,
body.marklis-fp .fp-value-title .fp-value-title-line1 {
white-space: nowrap;
}
body.home .fp-value-title .fp-value-title-br-mobile,
body.marklis-fp .fp-value-title .fp-value-title-br-mobile {
display: none;
}
@media (max-width: 768px) {
body.home .fp-value .fp-value-title,
body.marklis-fp .fp-value .fp-value-title {
font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
}
body.home .fp-value-title .fp-value-title-line1,
body.marklis-fp .fp-value-title .fp-value-title-line1 {
white-space: normal;
}
body.home .fp-value-title .fp-value-title-br-mobile,
body.marklis-fp .fp-value-title .fp-value-title-br-mobile {
display: block;
}
}
@media (min-width: 769px) {
body.home .fp-value-title,
body.marklis-fp .fp-value-title { font-size: clamp(2.25rem, 4vw, 3.25rem); }
body.home .fp-value-text,
body.marklis-fp .fp-value-text { font-size: 1.2rem; }
} body.home .fp-emphasis-price,
body.marklis-fp .fp-emphasis-price {
display: inline-block;
font-size: 1.35em;
font-weight: 900;
color: var(--fp-primary);
letter-spacing: 0.02em;
padding: 0 0.1em;
position: relative;
will-change: color;
}
body.home .fp-emphasis-price::after,
body.marklis-fp .fp-emphasis-price::after {
content: '';
position: absolute;
bottom: 2px;
left: 0;
right: 0;
height: 4px;
background: var(--fp-accent-soft);
border-radius: 2px;
border-radius: 3px;
z-index: -1;
} body.home .fp-value.fp-reveal.is-visible.fp-hero-flash-end-black .fp-emphasis-price,
body.marklis-fp .fp-value.fp-reveal.is-visible.fp-hero-flash-end-black .fp-emphasis-price {
animation: fp-hero-flash-end-black 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
}
body.home .fp-value.fp-reveal.is-visible.fp-hero-flash-end-orange .fp-emphasis-price,
body.marklis-fp .fp-value.fp-reveal.is-visible.fp-hero-flash-end-orange .fp-emphasis-price {
animation: fp-hero-flash-end-orange 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
}
body.home .fp-value.fp-reveal.is-visible.fp-hero-flash-end-blue .fp-emphasis-price,
body.marklis-fp .fp-value.fp-reveal.is-visible.fp-hero-flash-end-blue .fp-emphasis-price {
animation: fp-hero-flash-end-blue 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s 4 forwards;
}
body.home .fp-emphasis-price-inline,
body.marklis-fp .fp-emphasis-price-inline {
font-weight: 800;
color: var(--fp-primary);
}
body.home .fp-tag-price,
body.marklis-fp .fp-tag-price {
font-weight: 800 !important;
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-dark) 100%) !important;
color: #fff !important;
}
body.home .fp-cell-price,
body.marklis-fp .fp-cell-price {
font-weight: 800;
font-size: 1.1em;
}
body.home .fp-cell-price-lg,
body.marklis-fp .fp-cell-price-lg {
font-size: 1.2em;
font-weight: 900;
}
@media (min-width: 769px) {
body.home .fp-emphasis-price,
body.marklis-fp .fp-emphasis-price {
font-size: 1.4em;
}
}
body.home .fp-value-text,
body.marklis-fp .fp-value-text {
font-size: 1.1rem;
color: var(--fp-text-muted);
margin: 0 0 var(--fp-space);
max-width: 680px;
margin-left: auto;
margin-right: auto;
line-height: 1.9;
} body.home .fp-cases,
body.marklis-fp .fp-cases {
padding: var(--fp-space-2xl) var(--fp-space);
text-align: left;
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
} body.home.fp-js-ready .fp-cases-grid .fp-case-card,
body.marklis-fp.fp-js-ready .fp-cases-grid .fp-case-card {
opacity: 0;
transform: translateY(60px) scale(0.95);
transition:
opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
body.home .fp-cases.is-visible .fp-case-card,
body.marklis-fp .fp-cases.is-visible .fp-case-card {
opacity: 1;
transform: translateY(0) scale(1);
}
body.home .fp-cases.is-visible .fp-case-card:nth-child(1),
body.marklis-fp .fp-cases.is-visible .fp-case-card:nth-child(1) { transition-delay: 0.05s; }
body.home .fp-cases.is-visible .fp-case-card:nth-child(2),
body.marklis-fp .fp-cases.is-visible .fp-case-card:nth-child(2) { transition-delay: 0.13s; }
body.home .fp-cases.is-visible .fp-case-card:nth-child(3),
body.marklis-fp .fp-cases.is-visible .fp-case-card:nth-child(3) { transition-delay: 0.21s; }
body.home .fp-cases-grid,
body.marklis-fp .fp-cases-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 32px;
max-width: 1200px;
margin: 0 auto var(--fp-space);
padding: 0 var(--fp-space);
}
body.home .fp-case-card,
body.marklis-fp .fp-case-card {
display: block;
text-align: left;
text-decoration: none;
color: inherit;
background: #ffffff;
border-radius: var(--fp-radius);
border: 1px solid rgba(0,0,0,0.06);
overflow: hidden;
box-shadow: 0 4px 24px rgba(0,0,0,0.06);
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.35s, border-color 0.3s;
}
body.home .fp-case-card:hover,
body.marklis-fp .fp-case-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 48px rgba(55, 90, 157, 0.14);
border-color: rgba(55, 90, 157, 0.3);
}
body.home .fp-case-img-wrap,
body.marklis-fp .fp-case-img-wrap {
aspect-ratio: 16/10;
overflow: hidden;
background: linear-gradient(135deg, #f0f4f0 0%, #e0e8e0 100%);
position: relative;
}
body.home .fp-case-img-wrap,
body.marklis-fp .fp-case-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
body.home .fp-case-img-title,
body.marklis-fp .fp-case-img-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
padding: 20px 20px 16px;
font-family: var(--fp-font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.4;
color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.25);
background:
linear-gradient(to top,
rgba(42, 68, 118, 0.92) 0%,
rgba(55, 90, 157, 0.78) 55%,
rgba(55, 90, 157, 0.0) 100%);
transition: opacity 0.3s ease;
}
body.home .fp-case-card:hover .fp-case-img-title,
body.marklis-fp .fp-case-card:hover .fp-case-img-title {
opacity: 0.95;
}
body.home .fp-case-card:hover,
body.marklis-fp .fp-case-card:hover .fp-case-img-wrap img { transform: scale(1.06); }
body.home .fp-case-tag,
body.marklis-fp .fp-case-tag {
display: inline-block;
font-size: 0.85rem;
font-weight: 700;
color: var(--fp-primary);
margin: 20px 24px 0;
padding: 6px 14px;
background: rgba(55, 90, 157, 0.12);
border-radius: 20px;
letter-spacing: 0.05em;
}
body.home .fp-case-tag strong,
body.marklis-fp .fp-case-tag strong {
font-size: 1.15em;
font-weight: 900;
margin: 0 0.05em;
}
body.home .fp-case-title,
body.marklis-fp .fp-case-title {
font-family: var(--fp-font-display);
font-size: 1.2rem;
font-weight: 700;
margin: 0 24px 24px;
line-height: 1.5;
} body.home .fp-compare,
body.marklis-fp .fp-compare {
padding: var(--fp-space-2xl) var(--fp-space);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.home .fp-compare-table-wrap,
body.marklis-fp .fp-compare-table-wrap {
max-width: 960px;
margin: 0 auto var(--fp-space-lg);
padding: 0 var(--fp-space);
overflow-x: auto;
border-radius: 20px;
box-shadow: 0 8px 40px rgba(28, 96, 75, 0.08), 0 2px 12px rgba(0,0,0,0.04);
-webkit-overflow-scrolling: touch;
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table {
width: 100%;
border-collapse: collapse;
font-size: 1rem;
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th,
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table td {
padding: 20px 28px;
text-align: left;
border-bottom: 1px solid rgba(0,0,0,0.06);
transition: background 0.2s;
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th {
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-dark) 100%);
color: #fff;
font-weight: 700;
font-size: 0.95rem;
letter-spacing: 0.03em;
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th:first-child { border-radius: 20px 0 0 0; }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th:last-child { border-radius: 0 20px 0 0; }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th:not(:first-child) { text-align: center; }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table td:not(:first-child) { text-align: center; }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table tbody tr:nth-child(even) { background: rgba(28, 96, 75, 0.02); }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table tbody tr:hover { background: rgba(28, 96, 75, 0.04); }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table td.fp-compare-best-cell {
color: var(--fp-primary);
font-weight: 600;
background: rgba(28, 96, 75, 0.06);
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th.fp-compare-best {
background: linear-gradient(135deg, var(--fp-primary-light) 0%, var(--fp-primary) 50%, var(--fp-primary-dark) 100%);
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table tr.fp-compare-total td {
background: linear-gradient(90deg, rgba(28, 96, 75, 0.08) 0%, rgba(28, 96, 75, 0.12) 100%);
font-weight: 700;
border-bottom: none;
font-size: 1.05rem;
}
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table tr.fp-compare-total td:first-child { border-radius: 0 0 0 20px; }
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table tr.fp-compare-total td:last-child { border-radius: 0 0 20px 0; } body.home .fp-compare-cards,
body.marklis-fp .fp-compare-cards {
display: none;
flex-direction: column;
gap: 16px;
max-width: 480px;
margin: 0 auto var(--fp-space-lg);
}
body.home .fp-compare-card,
body.marklis-fp .fp-compare-card {
padding: 20px;
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.06);
border: 1px solid rgba(0,0,0,0.04);
}
body.home .fp-compare-card-total,
body.marklis-fp .fp-compare-card-total {
background: linear-gradient(135deg, rgba(28, 96, 75, 0.08) 0%, rgba(28, 96, 75, 0.12) 100%);
border-color: rgba(28, 96, 75, 0.2);
}
body.home .fp-compare-card-label,
body.marklis-fp .fp-compare-card-label {
display: block;
font-weight: 700;
font-size: 1rem;
margin-bottom: 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--fp-primary);
color: var(--fp-primary);
}
body.home .fp-compare-card-row,
body.marklis-fp .fp-compare-card-row {
display: flex;
justify-content: space-between;
padding: 10px 0;
font-size: 0.95rem;
border-bottom: 1px solid rgba(0,0,0,0.06);
}
body.home .fp-compare-card-row:last-child,
body.marklis-fp .fp-compare-card-row:last-child { border-bottom: none; }
body.home .fp-compare-card-row,
body.marklis-fp .fp-compare-card-row span:first-child { color: var(--fp-text-muted); font-weight: 500; }
body.home .fp-compare-card-row.fp-compare-card-best,
body.marklis-fp .fp-compare-card-row.fp-compare-card-best {
color: var(--fp-primary);
font-weight: 600;
background: rgba(28, 96, 75, 0.06);
margin: 8px -20px 0;
padding: 12px 20px;
border-radius: 0 0 12px 12px;
} @media (max-width: 768px) {
body.home .fp-compare-card-row.fp-compare-card-best,
body.marklis-fp .fp-compare-card-row.fp-compare-card-best {
background: rgba(55, 90, 157, 0.16);
border-left: 4px solid var(--fp-primary);
margin: 10px -20px 0;
padding: 14px 20px;
font-weight: 700;
box-shadow: 0 2px 12px rgba(55, 90, 157, 0.18);
}
body.home .fp-compare-card-row.fp-compare-card-best span:first-child,
body.marklis-fp .fp-compare-card-row.fp-compare-card-best span:first-child {
color: var(--fp-primary);
font-weight: 700;
}
body.home .fp-compare-card-row.fp-compare-card-best .fp-cell-price,
body.marklis-fp .fp-compare-card-row.fp-compare-card-best .fp-cell-price {
font-weight: 800;
}
}
body.home .fp-compare-summary,
body.marklis-fp .fp-compare-summary {
text-align: center;
max-width: 960px;
margin: 0 auto var(--fp-space);
padding: var(--fp-space) 0;
}
body.home .fp-compare .fp-section-cta,
body.marklis-fp .fp-compare .fp-section-cta {
display: flex;
justify-content: center;
} body.home .fp-compare-summary-steps,
body.marklis-fp .fp-compare-summary-steps {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 20px;
align-items: center;
}
body.home .fp-compare-summary-step,
body.marklis-fp .fp-compare-summary-step {
margin: 0;
padding: 6px 0;
font-size: 1.15rem;
line-height: 1.7;
color: #333;
font-weight: 500;
}
body.home .fp-compare-summary-step--main,
body.marklis-fp .fp-compare-summary-step--main {
font-size: clamp(2rem, 4vw, 2.6rem);
font-weight: 700;
color: #333;
padding: 10px 0 6px;
white-space: nowrap;
}
body.home .fp-compare-summary-step--main .fp-emphasis-price,
body.marklis-fp .fp-compare-summary-step--main .fp-emphasis-price {
font-size: 1.08em;
}
body.home .fp-compare-summary-note,
body.marklis-fp .fp-compare-summary-note {
font-size: clamp(0.95rem, 2vw, 1.1rem);
color: #666;
margin: 0;
line-height: 1.7;
text-align: center;
}
@media (min-width: 769px) {
body.home .fp-compare-summary-step,
body.marklis-fp .fp-compare-summary-step { font-size: 1.25rem; }
body.home .fp-compare-summary-step--main,
body.marklis-fp .fp-compare-summary-step--main { font-size: 2.4rem; }
body.home .fp-compare-summary-note,
body.marklis-fp .fp-compare-summary-note { font-size: 1.1rem; }
}
@media (max-width: 768px) {
body.home .fp-compare-summary-step--main,
body.marklis-fp .fp-compare-summary-step--main {
white-space: normal;
}
}
@media (max-width: 768px) {
body.home .fp-compare-table-wrap,
body.marklis-fp .fp-compare-table-wrap { display: none; }
body.home .fp-compare-cards,
body.marklis-fp .fp-compare-cards { display: flex; }
}
@media (min-width: 769px) {
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table th,
body.home .fp-compare-table,
body.marklis-fp .fp-compare-table td { padding: 20px 28px; }
} body.home .fp-transform,
body.marklis-fp .fp-transform {
padding: var(--fp-space-2xl) var(--fp-space);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.home .fp-transform-grid,
body.marklis-fp .fp-transform-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto;
}
body.home .fp-transform-card,
body.marklis-fp .fp-transform-card {
padding: 36px 28px;
background: #ffffff;
border-radius: var(--fp-radius);
border: 1px solid rgba(0,0,0,0.06);
border-top: 3px solid var(--fp-primary);
border-radius: 20px;
text-align: center;
box-shadow: 0 4px 24px rgba(0,0,0,0.05);
border: 1px solid rgba(0,0,0,0.04);
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.3s, border-color 0.3s;
}
body.home .fp-transform-card:hover,
body.marklis-fp .fp-transform-card:hover {
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(55, 90, 157, 0.15);
border-top-color: var(--fp-accent);
border-color: rgba(55, 90, 157, 0.2);
}
body.home .fp-transform-icon,
body.marklis-fp .fp-transform-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 68px;
height: 68px;
font-size: 1.4rem;
font-weight: 900;
color: #fff;
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-dark) 100%);
border-radius: 18px;
margin-bottom: 20px;
box-shadow: 0 6px 24px rgba(28, 96, 75, 0.25);
}
body.home .fp-transform-card .fp-transform-card-title,
body.marklis-fp .fp-transform-card .fp-transform-card-title { font-size: 1.25rem; margin: 0 0 10px; font-weight: 800; letter-spacing: 0.02em; }
body.home .fp-transform-card,
body.marklis-fp .fp-transform-card p { font-size: 0.9rem; color: var(--fp-text-muted); margin: 0; line-height: 1.75; }
@media (min-width: 600px) {
body.home .fp-transform-grid,
body.marklis-fp .fp-transform-grid { grid-template-columns: repeat(4, 1fr); gap: 28px; }
}
body.home .fp-transform-grid--services,
body.marklis-fp .fp-transform-grid--services { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 600px) {
body.home .fp-transform-grid--services,
body.marklis-fp .fp-transform-grid--services { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
body.home .fp-transform-grid--services,
body.marklis-fp .fp-transform-grid--services { grid-template-columns: repeat(4, 1fr); }
} body.home .fp-process,
body.marklis-fp .fp-process {
padding: var(--fp-space-2xl) var(--fp-space);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
body.home .fp-process-inner,
body.marklis-fp .fp-process-inner {
width: 100%;
max-width: 720px;
margin: 0 auto var(--fp-space-lg);
padding: 0 var(--fp-space);
}
body.home .fp-process-inner .fp-process-main-title,
body.marklis-fp .fp-process-inner .fp-process-main-title,
body.home .fp-process-inner .fp-process-sub,
body.marklis-fp .fp-process-inner .fp-process-sub {
text-align: center;
}
body.home .fp-process .fp-section-cta,
body.marklis-fp .fp-process .fp-section-cta {
width: 100%;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 12px;
}
body.home .fp-process-list,
body.marklis-fp .fp-process-list {
padding: 0;
margin: 0;
text-align: left;
} body.home.fp-js-ready .fp-process-step,
body.marklis-fp.fp-js-ready .fp-process-step {
opacity: 0;
transform: translateX(-50px);
transition:
opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
body.home .fp-process.is-visible .fp-process-step,
body.marklis-fp .fp-process.is-visible .fp-process-step {
opacity: 1;
transform: translateX(0);
}
body.home .fp-process.is-visible .fp-process-step:nth-of-type(1),
body.marklis-fp .fp-process.is-visible .fp-process-step:nth-of-type(1) { transition-delay: 0.05s; }
body.home .fp-process.is-visible .fp-process-step:nth-of-type(3),
body.marklis-fp .fp-process.is-visible .fp-process-step:nth-of-type(3) { transition-delay: 0.13s; }
body.home .fp-process.is-visible .fp-process-step:nth-of-type(5),
body.marklis-fp .fp-process.is-visible .fp-process-step:nth-of-type(5) { transition-delay: 0.21s; }
body.home .fp-process.is-visible .fp-process-step:nth-of-type(7),
body.marklis-fp .fp-process.is-visible .fp-process-step:nth-of-type(7) { transition-delay: 0.29s; }
body.home .fp-process-step,
body.marklis-fp .fp-process-step {
padding: 32px 0;
}
body.home .fp-process-step-head,
body.marklis-fp .fp-process-step-head {
display: flex;
align-items: baseline;
gap: 16px;
margin-bottom: 12px;
}
body.home .fp-process-num,
body.marklis-fp .fp-process-num {
font-family: var(--fp-font-display);
font-size: clamp(3rem, 8vw, 4.5rem);
font-weight: 700;
color: var(--fp-primary);
opacity: 0.9;
line-height: 1;
letter-spacing: -0.02em;
}
body.home .fp-process-step .fp-process-step-title,
body.marklis-fp .fp-process-step .fp-process-step-title {
font-family: var(--fp-font-display);
font-size: clamp(1.15rem, 2.5vw, 1.5rem);
font-weight: 700;
color: #1a1a1a;
margin: 0;
line-height: 1.3;
}
body.home .fp-process-step p,
body.marklis-fp .fp-process-step p {
margin: 0;
padding-left: 0;
font-size: 1rem;
color: var(--fp-text-muted);
line-height: 1.8;
}
body.home .fp-process-sep,
body.marklis-fp .fp-process-sep {
border: none;
border-top: 1px solid rgba(0,0,0,0.08);
margin: 0;
}
body.home .fp-process .fp-section-cta,
body.marklis-fp .fp-process .fp-section-cta { margin-top: var(--fp-space); }
@media (max-width: 600px) {
body.home .fp-process-step,
body.marklis-fp .fp-process-step { padding: 24px 0; }
body.home .fp-process-num,
body.marklis-fp .fp-process-num { font-size: 2.5rem; }
} body.home .fp-services,
body.marklis-fp .fp-services {
padding: var(--fp-space-2xl) var(--fp-space);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.home .fp-services-notice,
body.marklis-fp .fp-services-notice {
max-width: 680px;
margin: 0 auto var(--fp-space-lg);
padding: 0 var(--fp-space);
text-align: center;
}
body.home .fp-services-notice p,
body.marklis-fp .fp-services-notice p {
margin: 0 0 var(--fp-space);
line-height: 1.8;
font-size: clamp(1.05rem, 2.5vw, 1.2rem);
color: var(--fp-text-muted);
}
body.home .fp-services-notice .fp-services-tags,
body.marklis-fp .fp-services-notice .fp-services-tags {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 12px;
align-items: center;
}
body.home .fp-services-notice .fp-services-tags span,
body.marklis-fp .fp-services-notice .fp-services-tags span {
display: inline-block;
padding: 10px 20px;
font-size: 0.95rem;
font-weight: 600;
color: var(--fp-primary);
background: transparent;
border: 2px solid rgba(28, 96, 75, 0.2);
border-radius: var(--fp-radius);
transition: border-color 0.2s, background 0.2s;
}
body.home .fp-services-notice .fp-services-tags span:hover,
body.marklis-fp .fp-services-notice .fp-services-tags span:hover {
border-color: var(--fp-primary);
background: rgba(28, 96, 75, 0.06);
}
body.home .fp-services-notice .fp-services-tags .fp-tag-price,
body.marklis-fp .fp-services-notice .fp-services-tags .fp-tag-price {
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-dark) 100%) !important;
color: #fff !important;
border-color: transparent !important;
}
@media (min-width: 769px) {
body.home .fp-services-notice p,
body.marklis-fp .fp-services-notice p { font-size: 1.2rem; }
body.home .fp-services-notice .fp-services-tags span,
body.marklis-fp .fp-services-notice .fp-services-tags span { font-size: 1rem; padding: 12px 24px; }
}
body.home .fp-services-grid,
body.marklis-fp .fp-services-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
max-width: 1100px;
margin: 0 auto var(--fp-space);
padding: 0 var(--fp-space);
} body.home.fp-js-ready .fp-services-grid .fp-service-card,
body.marklis-fp.fp-js-ready .fp-services-grid .fp-service-card {
opacity: 0;
transform: translateY(50px) scale(0.95);
transition:
opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}
body.home .fp-services.is-visible .fp-service-card,
body.marklis-fp .fp-services.is-visible .fp-service-card {
opacity: 1;
transform: translateY(0) scale(1);
}
body.home .fp-services.is-visible .fp-service-card:nth-child(1),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(1) { transition-delay: 0.05s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(2),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(2) { transition-delay: 0.11s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(3),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(3) { transition-delay: 0.17s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(4),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(4) { transition-delay: 0.23s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(5),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(5) { transition-delay: 0.29s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(6),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(6) { transition-delay: 0.35s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(7),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(7) { transition-delay: 0.41s; }
body.home .fp-services.is-visible .fp-service-card:nth-child(8),
body.marklis-fp .fp-services.is-visible .fp-service-card:nth-child(8) { transition-delay: 0.47s; }
body.home .fp-services-sevendex,
body.marklis-fp .fp-services-sevendex {
grid-template-columns: repeat(2, 1fr);
gap: 40px 32px;
}
body.home .fp-service-card,
body.marklis-fp .fp-service-card {
display: flex;
align-items: center;
gap: 24px;
padding: 28px 28px;
text-decoration: none;
color: inherit;
background: #fff;
border: 1px solid rgba(0,0,0,0.06);
border-radius: 20px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}
body.home .fp-services-sevendex .fp-service-card,
body.marklis-fp .fp-services-sevendex .fp-service-card {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 36px 32px;
border: none;
box-shadow: none;
background: transparent;
}
body.home .fp-services-sevendex .fp-service-card:hover,
body.marklis-fp .fp-services-sevendex .fp-service-card:hover {
transform: translateY(-4px);
}
body.home .fp-services-sevendex .fp-service-card:hover .fp-svdex-icon,
body.marklis-fp .fp-services-sevendex .fp-service-card:hover .fp-svdex-icon {
color: var(--fp-primary-dark);
transform: scale(1.05);
}
body.home .fp-services .fp-section-cta,
body.marklis-fp .fp-services .fp-section-cta {
display: flex;
justify-content: center;
}
body.home .fp-service-icon,
body.marklis-fp .fp-service-icon {
flex-shrink: 0;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-dark) 100%);
color: #fff;
font-size: 0.9rem;
font-weight: 700;
border-radius: 14px;
}
body.home .fp-svdex-icon,
body.marklis-fp .fp-svdex-icon {
width: 64px;
height: 64px;
background: none;
color: var(--fp-primary);
transition: color 0.3s, transform 0.3s;
}
body.home .fp-svdex-icon svg,
body.marklis-fp .fp-svdex-icon svg {
width: 100%;
height: 100%;
}
body.home .fp-svdex-icon img,
body.marklis-fp .fp-svdex-icon img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
body.home .fp-service-card .fp-service-card-title,
body.marklis-fp .fp-service-card .fp-service-card-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
body.home .fp-services-sevendex .fp-service-card .fp-service-card-title,
body.marklis-fp .fp-services-sevendex .fp-service-card .fp-service-card-title {
font-size: 1.35rem;
font-weight: 800;
color: var(--fp-primary);
margin-bottom: 8px;
}
body.home .fp-services-sevendex .fp-service-card p,
body.marklis-fp .fp-services-sevendex .fp-service-card p {
margin: 0;
font-size: 0.95rem;
color: var(--fp-text-muted);
line-height: 1.7;
}
@media (min-width: 769px) {
body.home .fp-service-icon,
body.marklis-fp .fp-service-icon {
width: 64px;
height: 64px;
font-size: 1rem;
border-radius: 16px;
}
body.home .fp-service-card,
body.marklis-fp .fp-service-card {
padding: 32px 32px;
gap: 28px;
}
body.home .fp-service-card .fp-service-card-title,
body.marklis-fp .fp-service-card .fp-service-card-title { font-size: 1.25rem; }
}
@media (min-width: 600px) {
body.home .fp-services-grid,
body.marklis-fp .fp-services-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
body.home .fp-services-sevendex,
body.marklis-fp .fp-services-sevendex { grid-template-columns: repeat(4, 1fr); gap: 48px 32px; }
} body.home .fp-company,
body.marklis-fp .fp-company {
padding: 0 var(--fp-space) var(--fp-space-2xl);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
} body.home .fp-company-typo-wrap,
body.marklis-fp .fp-company-typo-wrap {
padding: 0;
min-height: 0;
display: none;
}
body.home .fp-company-typo-inner,
body.marklis-fp .fp-company-typo-inner {
max-width: 1120px;
margin: 0 auto var(--fp-space-xl);
}
body.home .fp-company-typo-label,
body.marklis-fp .fp-company-typo-label {
font-size: 0.9rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(55, 90, 157, 0.9);
margin: 0 0 12px;
}
body.home .fp-company-typo-heading,
body.marklis-fp .fp-company-typo-heading {
margin: 0;
font-weight: 900;
font-size: clamp(2rem, 5.5vw, 3.5rem);
line-height: 1.15;
letter-spacing: 0.02em;
color: #375A9D;
} @keyframes fp-typo-leave-y {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-24px); }
}
@keyframes fp-typo-enter-y {
from { opacity: 0; transform: translateY(32px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fp-typo-leave-x {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(32px); }
}
@keyframes fp-typo-enter-x {
from { opacity: 0; transform: translateX(-32px); }
to { opacity: 1; transform: translateX(0); }
}
body.home .fp-company-typo-heading.fp-typo-leave-y,
body.marklis-fp .fp-company-typo-heading.fp-typo-leave-y {
animation: fp-typo-leave-y 0.45s ease forwards;
}
body.home .fp-company-typo-heading.fp-typo-enter-y,
body.marklis-fp .fp-company-typo-heading.fp-typo-enter-y {
animation: fp-typo-enter-y 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.home .fp-company-typo-heading.fp-typo-leave-x,
body.marklis-fp .fp-company-typo-heading.fp-typo-leave-x {
animation: fp-typo-leave-x 0.45s ease forwards;
}
body.home .fp-company-typo-heading.fp-typo-enter-x,
body.marklis-fp .fp-company-typo-heading.fp-typo-enter-x {
animation: fp-typo-enter-x 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@media (max-width: 768px) {
body.home .fp-company,
body.marklis-fp .fp-company {
padding-top: var(--fp-space);
padding-bottom: var(--fp-space-2xl);
}
body.home .fp-company .fp-section-header,
body.marklis-fp .fp-company .fp-section-header {
margin-bottom: var(--fp-space);
}
body.home .fp-company-tabs,
body.marklis-fp .fp-company-tabs {
margin-bottom: var(--fp-space);
}
body.home .fp-company-typo-wrap,
body.marklis-fp .fp-company-typo-wrap {
padding: 10vh var(--fp-space) 6vh;
}
body.home .fp-company-typo-inner,
body.marklis-fp .fp-company-typo-inner {
margin-bottom: var(--fp-space-lg);
}
body.home .fp-company-typo-heading,
body.marklis-fp .fp-company-typo-heading {
font-size: clamp(2.1rem, 10.5vw, 3.2rem);
}
}
body.home .fp-company-brand,
body.marklis-fp .fp-company-brand { color: var(--fp-primary) !important; font-weight: 700 !important; }
body.home .fp-company-tabs,
body.marklis-fp .fp-company-tabs {
display: flex;
gap: 12px;
margin-bottom: var(--fp-space-lg);
flex-wrap: wrap;
justify-content: center;
}
body.home .fp-tab,
body.marklis-fp .fp-tab {
padding: 16px 32px;
font-size: 1rem;
font-weight: 600;
color: #1c1c1c;
background: #fff;
border: 2px solid rgba(0,0,0,0.12);
border-radius: 10px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.home .fp-tab:hover,
body.marklis-fp .fp-tab:hover {
background: rgba(28, 96, 75, 0.06);
border-color: rgba(28, 96, 75, 0.3);
box-shadow: 0 4px 20px rgba(28, 96, 75, 0.12);
}
body.home .fp-tab.active,
body.marklis-fp .fp-tab.active {
background: linear-gradient(135deg, var(--fp-primary) 0%, var(--fp-primary-dark) 100%);
color: #fff;
border-color: transparent;
box-shadow: 0 6px 28px rgba(28, 96, 75, 0.35);
transform: scale(1.02);
}
body.home .fp-company-panel,
body.marklis-fp .fp-company-panel {
display: none;
max-width: 880px;
margin: 0 auto;
padding: 24px 24px 32px;
background: transparent;
border-radius: 0;
box-shadow: none;
border: none;
animation: fp-panel-fade 0.4s ease;
text-align: left;
}
@keyframes fp-panel-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
body.home .fp-company-panel.active,
body.marklis-fp .fp-company-panel.active { display: block; }
body.home .fp-company-panel h3,
body.marklis-fp .fp-company-panel h3 {
font-size: clamp(2.4rem, 5vw, 3.6rem);
margin: 0 0 16px;
font-weight: 900;
line-height: 1.2;
letter-spacing: 0.03em;
text-align: left;
color: #375A9D;
}
body.home .fp-company-lead,
body.marklis-fp .fp-company-lead {
font-weight: 600;
margin-bottom: 18px;
font-size: 1.05rem;
text-align: left;
}
body.home .fp-company-panel p,
body.marklis-fp .fp-company-panel p {
margin: 0 0 16px;
line-height: 1.9;
color: var(--fp-text-muted);
font-size: 1rem;
text-align: left;
}
body.home .fp-company-values,
body.marklis-fp .fp-company-values {
margin-top: 8px;
}
body.home .fp-company-value-item,
body.marklis-fp .fp-company-value-item {
margin-bottom: 28px;
}
body.home .fp-company-value-item:last-child,
body.marklis-fp .fp-company-value-item:last-child { margin-bottom: 0; }
body.home .fp-company-value-item h4,
body.marklis-fp .fp-company-value-item h4 {
font-size: 1.1rem;
font-weight: 700;
margin: 0 0 10px;
line-height: 1.4;
color: #375A9D;
}
body.home .fp-company-value-item p,
body.marklis-fp .fp-company-value-item p {
margin: 0;
font-size: 0.98rem;
line-height: 1.85;
}
@media (min-width: 769px) {
body.home .fp-company-panel h3,
body.marklis-fp .fp-company-panel h3 { font-size: 2.8rem; }
body.home .fp-company-panel p,
body.marklis-fp .fp-company-panel p { font-size: 1.05rem; }
body.home .fp-company-value-item h4,
body.marklis-fp .fp-company-value-item h4 { font-size: 1.15rem; }
body.home .fp-company-value-item p,
body.marklis-fp .fp-company-value-item p { font-size: 1.02rem; }
}
@media (max-width: 600px) {
body.home .fp-company-panel,
body.marklis-fp .fp-company-panel { padding: 24px 20px; }
} body.home .fp-faq,
body.marklis-fp .fp-faq {
padding: var(--fp-space-2xl) var(--fp-space);
background: #ffffff;
border-top: 1px solid rgba(0,0,0,0.06);
}
body.home .fp-faq-list,
body.marklis-fp .fp-faq-list {
display: block !important;
visibility: visible !important;
max-width: 1040px;
margin: 0 auto var(--fp-space-lg);
padding: 0;
} body.home.fp-js-ready .fp-faq-item,
body.marklis-fp.fp-js-ready .fp-faq-item {
opacity: 0;
transform: translateY(40px);
transition:
opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1),
transform 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}
body.home .fp-faq.is-visible .fp-faq-item,
body.marklis-fp .fp-faq.is-visible .fp-faq-item {
opacity: 1;
transform: translateY(0);
}
body.home .fp-faq-item,
body.marklis-fp .fp-faq-item {
display: block !important;
border: 1px solid rgba(0,0,0,0.15);
border-radius: 6px;
margin-bottom: 8px;
overflow: hidden;
background: #fff;
transition: border-color 0.2s, box-shadow 0.2s;
}
body.home .fp-faq-item[open],
body.marklis-fp .fp-faq-item[open] {
border-color: rgba(28, 96, 75, 0.3);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
body.home .fp-faq-item summary,
body.marklis-fp .fp-faq-item summary {
padding: 14px 44px 14px 20px;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
list-style: none;
display: flex;
align-items: center;
gap: 12px;
transition: background 0.2s;
position: relative;
}
body.home .fp-faq-item .fp-faq-q,
body.marklis-fp .fp-faq-item .fp-faq-q {
flex-shrink: 0;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
background: var(--fp-accent);
color: #fff;
font-size: 0.75rem;
font-weight: 700;
border-radius: 50%;
}
body.home .fp-faq-item summary::after,
body.marklis-fp .fp-faq-item summary::after {
content: "+";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
font-weight: 400;
color: #fff;
background: var(--fp-accent);
border-radius: 50%;
transition: transform 0.2s;
}
body.home .fp-faq-item[open] summary::after,
body.marklis-fp .fp-faq-item[open] summary::after {
content: "−";
}
body.home .fp-faq-item summary:hover,
body.marklis-fp .fp-faq-item summary:hover {
background: rgba(0,0,0,0.02);
}
body.home .fp-faq-item summary::-webkit-details-marker,
body.marklis-fp .fp-faq-item summary::-webkit-details-marker {
display: none;
}
body.home .fp-faq-item p,
body.marklis-fp .fp-faq-item p {
padding: 0 20px 16px 56px;
margin: 0;
line-height: 1.75;
color: var(--fp-text-muted);
font-size: 0.95rem;
}
@media (min-width: 769px) {
body.home .fp-faq-item summary,
body.marklis-fp .fp-faq-item summary {
font-size: 1rem;
padding: 16px 48px 16px 24px;
}
body.home .fp-faq-item p,
body.marklis-fp .fp-faq-item p {
font-size: 1rem;
padding: 0 24px 18px 60px;
}
}
@media (max-width: 480px) {
body.home .fp-faq-item summary,
body.marklis-fp .fp-faq-item summary {
padding: 12px 40px 12px 16px;
font-size: 0.9rem;
}
body.home .fp-faq-item p,
body.marklis-fp .fp-faq-item p {
padding: 0 16px 14px 48px;
font-size: 0.9rem;
}
body.home .fp-faq-item .fp-faq-q,
body.marklis-fp .fp-faq-item .fp-faq-q {
width: 20px;
height: 20px;
font-size: 0.65rem;
}
}
body.home .fp-faq .fp-section-cta,
body.marklis-fp .fp-faq .fp-section-cta {
display: flex;
justify-content: center;
} body.home .fp-contact.fp-contact-dark,
body.marklis-fp .fp-contact.fp-contact-dark {
padding: var(--fp-space-2xl) var(--fp-space);
text-align: center;
background: #375A9D;
color: #fff;
border: none;
border-radius: 0;
}
body.home .fp-contact-dark-title,
body.marklis-fp .fp-contact-dark-title {
font-family: var(--fp-font-display);
font-size: clamp(1.75rem, 5vw, 3rem);
font-weight: 900;
color: #fff;
margin: 0 0 8px;
letter-spacing: 0.02em;
line-height: 1.3;
}
body.home .fp-contact-dark-accent,
body.marklis-fp .fp-contact-dark-accent {
color: #ffd8a0;
font-weight: 900;
}
body.home .fp-contact-dark-lead,
body.marklis-fp .fp-contact-dark-lead {
font-size: 1rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 var(--fp-space-lg);
line-height: 1.6;
}
body.home .fp-contact-points,
body.marklis-fp .fp-contact-points {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--fp-space);
margin-bottom: var(--fp-space-lg);
}
body.home .fp-contact.fp-contact-dark .fp-contact-point,
body.marklis-fp .fp-contact.fp-contact-dark .fp-contact-point {
padding: 28px 32px;
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 16px;
text-align: center;
transition: transform 0.3s, background 0.3s, border-color 0.3s;
}
body.home .fp-contact.fp-contact-dark .fp-contact-point:hover,
body.marklis-fp .fp-contact.fp-contact-dark .fp-contact-point:hover {
transform: translateY(-4px);
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.2);
}
body.home .fp-contact.fp-contact-dark .fp-contact-point strong,
body.marklis-fp .fp-contact.fp-contact-dark .fp-contact-point strong {
display: block;
margin-bottom: 8px;
font-size: 1.1rem;
font-weight: 700;
color: #fff;
}
body.home .fp-contact.fp-contact-dark .fp-contact-point span,
body.marklis-fp .fp-contact.fp-contact-dark .fp-contact-point span {
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.75);
line-height: 1.5;
}
body.home .fp-contact .fp-contact-cta-btn,
body.marklis-fp .fp-contact .fp-contact-cta-btn {
font-size: 1.15rem;
padding: 20px 44px;
background: #C59C53;
color: #fff !important;
border: none;
box-shadow: 0 8px 32px rgba(197, 156, 83, 0.45);
transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}
body.home .fp-contact .fp-contact-cta-btn:hover,
body.marklis-fp .fp-contact .fp-contact-cta-btn:hover {
background: #9D7A3E;
color: #fff !important;
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(197, 156, 83, 0.55);
}
@media (min-width: 769px) {
body.home .fp-contact.fp-contact-dark .fp-contact-point strong,
body.marklis-fp .fp-contact.fp-contact-dark .fp-contact-point strong { font-size: 1.25rem; }
body.home .fp-contact.fp-contact-dark .fp-contact-point span,
body.marklis-fp .fp-contact.fp-contact-dark .fp-contact-point span { font-size: 1rem; }
body.home .fp-contact .fp-contact-cta-btn,
body.marklis-fp .fp-contact .fp-contact-cta-btn { font-size: 1.25rem; padding: 24px 52px; }
} body.home .fp-blog,
body.marklis-fp .fp-blog {
padding: var(--fp-space-2xl) var(--fp-space);
text-align: left;
background: #fff;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
body.home .fp-blog-label,
body.marklis-fp .fp-blog-label {
font-size: 0.9rem;
color: var(--fp-text-muted);
margin: 0 0 6px;
}
body.home .fp-blog-main-title,
body.marklis-fp .fp-blog-main-title {
font-family: var(--fp-font-display);
font-size: clamp(1.8rem, 4vw, 2.5rem);
font-weight: 900;
color: var(--fp-primary);
margin: 0 0 var(--fp-space-lg);
letter-spacing: 0.05em;
}
body.home .fp-blog-featured,
body.marklis-fp .fp-blog-featured {
display: grid;
grid-template-columns: 1fr;
gap: var(--fp-space);
margin-bottom: var(--fp-space);
}
body.home .fp-blog-featured-card,
body.marklis-fp .fp-blog-featured-card {
display: block;
text-decoration: none;
color: inherit;
transition: transform 0.25s, box-shadow 0.25s;
}
body.home .fp-blog-featured-card:hover,
body.marklis-fp .fp-blog-featured-card:hover {
transform: translateY(-2px);
}
body.home .fp-blog-featured-meta,
body.marklis-fp .fp-blog-featured-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
body.home .fp-blog-badge,
body.marklis-fp .fp-blog-badge {
font-size: 0.75rem;
font-weight: 700;
padding: 4px 12px;
background: var(--fp-accent);
color: #fff;
border-radius: 4px;
}
body.home .fp-blog-date,
body.marklis-fp .fp-blog-date {
font-size: 0.85rem;
color: var(--fp-text-muted);
}
body.home .fp-blog-featured-img-wrap,
body.marklis-fp .fp-blog-featured-img-wrap {
position: relative;
aspect-ratio: 16/10;
overflow: hidden;
border-radius: 8px;
background: linear-gradient(135deg, #f0f4f0 0%, #e0e8e0 100%);
}
body.home .fp-blog-featured-img-wrap img,
body.marklis-fp .fp-blog-featured-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s;
}
body.home .fp-blog-featured-card:hover .fp-blog-featured-img-wrap img,
body.marklis-fp .fp-blog-featured-card:hover .fp-blog-featured-img-wrap img {
transform: scale(1.03);
}
body.home .fp-blog-featured-overlay,
body.marklis-fp .fp-blog-featured-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 24px var(--fp-space) var(--fp-space);
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}
body.home .fp-blog-featured-title,
body.marklis-fp .fp-blog-featured-title {
font-family: var(--fp-font-display);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.5;
color: #fff;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}
body.home .fp-blog-featured-source,
body.marklis-fp .fp-blog-featured-source {
font-size: 0.85rem;
color: var(--fp-text-muted);
margin: 10px 0 0;
}
@media (min-width: 769px) {
body.home .fp-blog,
body.marklis-fp .fp-blog {
padding-left: 40px;
padding-right: 40px;
}
body.home .fp-blog-featured,
body.marklis-fp .fp-blog-featured {
grid-template-columns: repeat(2, 1fr);
gap: 28px 32px;
margin-bottom: var(--fp-space-lg);
}
body.home .fp-blog-featured-title,
body.marklis-fp .fp-blog-featured-title { font-size: 1.15rem; }
body.home .fp-blog .fp-section-cta,
body.marklis-fp .fp-blog .fp-section-cta { margin-top: var(--fp-space); }
}  body.home .fp-value .fp-value-title,
body.marklis-fp .fp-value .fp-value-title {
font-size: clamp(2rem, 5.5vw, 3.25rem) !important;
font-weight: 900 !important;
}
body.home .fp-value p,
body.marklis-fp .fp-value p,
body.home .fp-process-step p,
body.marklis-fp .fp-process-step p,
body.home .fp-company-panel p,
body.marklis-fp .fp-company-panel p,
body.home .fp-faq-item p,
body.marklis-fp .fp-faq-item p,
body.home .fp-services-notice p,
body.marklis-fp .fp-services-notice p {
font-size: 1rem;
color: #555;
}
body.home .fp-compare-card,
body.marklis-fp .fp-compare-card,
body.home .fp-stat,
body.marklis-fp .fp-stat,
body.home .fp-case-card,
body.marklis-fp .fp-case-card,
body.home .fp-transform-card,
body.marklis-fp .fp-transform-card,
body.home .fp-service-card,
body.marklis-fp .fp-service-card,
body.home .fp-company-panel,
body.marklis-fp .fp-company-panel,
body.home .fp-faq-item,
body.marklis-fp .fp-faq-item {
box-shadow: 0 24px 48px rgba(55, 90, 157, 0.08);
border: 1px solid #f0f0f0;
} body.home .fp-company-panel,
body.marklis-fp .fp-company-panel {
box-shadow: none !important;
border: none !important;
}
@media (min-width: 769px) {
body.home .fp-section-header .fp-process-main-title,
body.marklis-fp .fp-section-header .fp-process-main-title,
body.home .fp-process-main-title,
body.marklis-fp .fp-process-main-title {
font-size: clamp(2.5rem, 8vw, 5rem);
}
} body.home .fp-marquee-wrap,
body.marklis-fp .fp-marquee-wrap {
width: 100%;
overflow: hidden;
padding: 1.25rem 0;
background: transparent;
margin: 0;
}
body.home .fp-marquee-track,
body.marklis-fp .fp-marquee-track {
display: flex;
white-space: nowrap;
width: max-content;
animation: fp-marquee-flow 42s linear infinite;
will-change: transform;
backface-visibility: hidden;
}
body.home .fp-marquee-group,
body.marklis-fp .fp-marquee-group {
display: flex;
flex: 0 0 auto;
align-items: center;
}
body.home .fp-marquee-text,
body.marklis-fp .fp-marquee-text {
font-family: var(--fp-font-display), sans-serif;
font-size: clamp(2rem, 8vw, 4.5rem);
font-weight: 900;
letter-spacing: 0.15em; color: #6b7fa8;
-webkit-text-stroke: 0;
padding: 0 1.5rem;
flex-shrink: 0;
}
@keyframes fp-marquee-flow {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-50%, 0, 0); }
} @media (max-width: 768px) {
body.home .fp-compare-cards,
body.marklis-fp .fp-compare-cards {
display: flex !important;
flex-direction: column;
flex-wrap: nowrap;
overflow: visible;
gap: 16px;
padding-bottom: 12px;
margin: 0 auto var(--fp-space-lg);
max-width: 480px;
}
body.home .fp-compare-card,
body.marklis-fp .fp-compare-card {
flex: 0 0 auto;
min-width: 0;
} body.home .fp-compare-card.fp-reveal:not(.is-visible),
body.marklis-fp .fp-compare-card.fp-reveal:not(.is-visible) {
opacity: 0;
transform: translateY(16px);
filter: none;
transition:
opacity 0.6s cubic-bezier(0.33, 0.01, 0.2, 1),
transform 0.6s cubic-bezier(0.33, 0.01, 0.2, 1);
}
body.home .fp-compare-card.fp-reveal.is-visible,
body.marklis-fp .fp-compare-card.fp-reveal.is-visible {
opacity: 1;
transform: translateY(0);
}
body.home .fp-cases-grid,
body.marklis-fp .fp-cases-grid {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: var(--fp-space);
padding: 0 var(--fp-space) 12px;
margin: 0 calc(-1 * var(--fp-space));
}
body.home .fp-case-card,
body.marklis-fp .fp-case-card {
flex: 0 0 85%;
min-width: 85%;
scroll-snap-align: start;
}
body.home .fp-services-grid,
body.marklis-fp .fp-services-grid {
display: flex !important;
flex-wrap: nowrap;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
gap: var(--fp-space);
padding: 0 var(--fp-space) 12px;
margin: 0 calc(-1 * var(--fp-space));
}
body.home .fp-service-card,
body.marklis-fp .fp-service-card {
flex: 0 0 85%;
min-width: 85%;
scroll-snap-align: start;
}
}  @media (max-width: 768px) {
body.home .fp-process-step,
body.marklis-fp .fp-process-step {
position: static;
padding: 24px 0;
}
body.home .fp-process-step-head,
body.marklis-fp .fp-process-step-head {
position: static;
align-items: center;
}
body.home .fp-process-num,
body.marklis-fp .fp-process-num {
position: static !important;
font-size: 1.8rem !important;
font-weight: 700 !important;
color: var(--fp-primary) !important;
opacity: 1 !important;
}
} @media (max-width: 480px) {
body.home .fp-cases-grid,
body.marklis-fp .fp-cases-grid {
margin: 0;
padding: 0 16px 12px;
}
}