:root {
--color-white: #FFFFFF;
--color-black: #000c33;
--color-blue-main: #0057FF;
--color-red: #E60023;
--color-grey-dark: #414D74;
--color-grey-light: #6E6E6E;
--color-grey-bg: #F5F5F5;
--color-green: #ECFF00;
--font-heading: 'Montserrat', sans-serif;
--font-text: 'DM Sans', sans-serif;
}
html {
scroll-behavior: smooth;
font-size: 16px !important;
}
body {
margin: 0;
padding: 0;
font-family: var(--font-text);
background-color: var(--color-white);
color: var(--color-black);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.container {
max-width: 1100px;
margin: 0 auto;
padding: 0 20px;
}
.container-narrow {
max-width: 800px;
margin: 0 auto;
padding: 0 20px;
}
.section {
padding: 120px 0;
position: relative; 
overflow: hidden;
}
.section-narrow-padding {
padding: 100px 0;
}
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 900; margin: 0 0 20px 0;
letter-spacing: -1px; }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); line-height: 1.1; }
h2 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; }
h3 { font-size: 1.5rem; line-height: 1.3; }
p {
font-size: 1.1rem;
line-height: 1.6;
color: var(--color-grey-dark);
margin: 0 0 20px 0;
}
p:last-child {
margin-bottom: 0;
}
a.button-primary {
display: inline-block;
background-color: var(--color-blue-main);
color: var(--color-white);
padding: 18px 35px;
text-decoration: none;
font-family: var(--font-text);
font-weight: 700;
transition: transform 0.2s ease;
}
a.button-primary.center {
margin: 0 auto;
text-align: center;
}
a.button-primary:hover {
transform: scale(1.05);
}
.text-center {
text-align: center;
}   .sticky-header {
position: sticky;
top: 0;
width: 100%;
background-color: rgba(0, 12, 51, 0.8); z-index: 1000;
padding: 15px 0;
border-bottom: 1px solid var(--color-ui-grey); -webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.sticky-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1; backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
width: 100%;
height: 100%;
} .sticky-header .container,
.sticky-header .fl-row-content{
max-width: 1100px;
margin: 0 auto;
padding: 0px;
display: flex;
justify-content: space-between;
align-items: center;
} .sticky-header .fl-col-group{
display:flex;
align-items:flex-end;
width:100%;
}
.sticky-header .fl-col-group > .fl-col:first-child{ flex:0 0 auto; }
.sticky-header .fl-col-group > .fl-col:last-child{
flex: 1 1 auto;
margin-left:auto;
}
.sticky-header .fl-col-group > .fl-col:last-child .fl-col-content {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 30px;
} .sticky-header .logo,
.sticky-header .logo a{
font-family: var(--font-heading);
font-weight: 900;
font-size: 1.5rem;
color: var(--color-white);
text-decoration: none;
white-space: nowrap;
letter-spacing: -1px;
line-height: 1;
} .sticky-header nav,
.sticky-header .primary-nav{
display:flex;
align-items:center;
}
.sticky-header nav a,
.sticky-header .primary-nav a{
color: var(--color-grey-bg);
text-decoration: none;
margin-left: 15px;
font-weight: 500;
padding-bottom: 5px;
}
.sticky-header nav a:hover,
.sticky-header .primary-nav a:hover{
color: var(--color-white);
} .hamburger-menu{
display:none; cursor:pointer; background:transparent; border:0;
width:30px; height:19px; padding:0; position:relative;
} .hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after{
content:''; position:absolute; left:0; width:25px; height:3px; background:#fff;
transform:none; transition:transform .3s ease, opacity .2s ease;
}
.hamburger-menu::before{ top:0; }
.hamburger-menu span{   top:8px; } .hamburger-menu::after{ top:16px; }  html.menu-open .hamburger-menu span{ opacity:0; }
html.menu-open .hamburger-menu::before{ transform: translateY(8px) rotate(45deg); }
html.menu-open .hamburger-menu::after{  transform: translateY(-8px) rotate(-45deg); }  .mobile-menu{
position: fixed;
inset: 0;
width: 100%;
height: 100vh; display: flex;
align-items: center;
justify-content: center;
background: var(--color-grey-dark, #4A4A4A);
transform: translateY(-100%);
transition: transform .35s ease;
z-index: 1200;
} .mobile-menu[hidden]{
display: none !important;
}
.menu-open .mobile-menu{ transform: translateY(0); }
.mobile-menu__nav{
display: flex; flex-direction: column; gap: 18px;
font-size: 1.5rem; text-align: center; align-items: center;
} .hamburger-menu{ display:none; cursor:pointer; background:transparent; border:0; width:30px; height:19px; padding:0; position:relative; }
.hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after{
content:''; position:absolute; left:0; width:25px; height:3px; background:#fff; transform:none; transition:transform .3s ease, opacity .2s ease;
}
.hamburger-menu::before{ top:0; }
.hamburger-menu span{   top:8px; }
.hamburger-menu::after{ top:16px; }
html.menu-open .hamburger-menu span{ opacity:0; }
html.menu-open .hamburger-menu::before{ transform: translateY(8px) rotate(45deg); }
html.menu-open .hamburger-menu::after{  transform: translateY(-8px) rotate(-45deg); }
@media (max-width:768px){
.hamburger-menu{ display:block; }
.sticky-header .primary-nav{ display:none !important; }
}  .menu-open .sticky-header{
z-index: 1301;
background-color: transparent;
border-bottom-color: transparent;
} .menu-open .mobile-menu{ z-index: 1200; } .menu-open .hamburger-menu{
position: fixed;
top: 14px;
right: 20px;
z-index: 1302; } .admin-bar.menu-open .hamburger-menu{ top: calc(46px + 14px); }
@media (min-width: 783px){
.admin-bar.menu-open .hamburger-menu{ top: calc(32px + 14px); }
} .menu-open .mobile-menu__close{
opacity: 0;
pointer-events: none;
} .hamburger-menu{ 
width: 36px;
height: 24px;
}
.hamburger-menu span,
.hamburger-menu::before,
.hamburger-menu::after{
width: 25px;
height: 3px;
} @supports (padding: max(0px)){
.menu-open .hamburger-menu{
right: max(20px, env(safe-area-inset-right));
}
}   .glitch {
position: relative;
color: var(--color-white);
}
.glitch::before,
.glitch::after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: var(--color-black);
overflow: hidden;
clip-path: inset(50% 50% 50% 50%);
}
.glitch::before {
left: -2px;
text-shadow: -1px 0 var(--color-blue-main);
animation: glitch-anim-1 2.5s infinite linear alternate-reverse;
}
.glitch::after {
left: 2px;
text-shadow: 1px 0 var(--color-green, #ECFF00);
animation: glitch-anim-2 3s infinite linear alternate-reverse;
}
@keyframes glitch-anim-1 { 0% { clip-path: inset(41% 0 57% 0); transform: translate(-2px, 1px); } 20% { clip-path: inset(20% 0 75% 0); transform: translate(3px, -2px); } 40% { clip-path: inset(62% 0 32% 0); transform: translate(-1px, 3px); } 60% { clip-path: inset(80% 0 10% 0); transform: translate(2px, -1px); } 80% { clip-path: inset(15% 0 82% 0); transform: translate(-3px, 2px); } 100% { clip-path: inset(50% 0 45% 0); transform: translate(1px, -3px); } }
@keyframes glitch-anim-2 { 0% { clip-path: inset(82% 0 15% 0); transform: translate(2px, -3px); } 20% { clip-path: inset(55% 0 35% 0); transform: translate(-2px, 1px); } 40% { clip-path: inset(25% 0 70% 0); transform: translate(3px, 2px); } 60% { clip-path: inset(90% 0 5% 0); transform: translate(-1px, -2px); } 80% { clip-path: inset(45% 0 50% 0); transform: translate(2px, 3px); } 100% { clip-path: inset(5% 0 92% 0); transform: translate(-3px, -1px); } }  .hero-section .eyebrow { font-size: 1rem; letter-spacing: 1.5px; opacity: 0.8; color: #6E6E6E; }
.hero-section h2.subline { font-family: var(--font-text); font-weight: 400; font-size: clamp(1.2rem, 2vw, 1.5rem); max-width: 600px; margin: 20px 0 40px 0; color: #fff; }
.hero-content h1 {color: #fff}   .pain-point-card .icon{
width:40px; height:30px;
margin:0 auto 20px;
background:var(--color-blue-main); box-shadow:
-3px  3px 0 #E60023, 3px -3px 0 #0070F3; } .problem-section .container-narrow,
#wish .container-narrow {
position: relative;
z-index: 2;
}
.background-graphic {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
z-index: 1;
opacity: 0.05;
}
.pain-point-card { margin-bottom: 60px; }
.pain-point-card .icon { font-size: 2.5rem; color: var(--color-blue-main); display: block; margin-bottom: 10px; }
.pain-point-card h3 { font-family: var(--font-text); font-style: italic; font-size: 1.8rem; font-weight: 500; color: var(--color-black); }
.pain-point-card .subtext { color: var(--color-grey-light); max-width: 500px; margin-left: auto; margin-right: auto; }
.usp-list p { font-size: 1.3rem; }
.quote-block {
margin: 60px auto;
border-top: 1px solid var(--color-grey-dark);
border-bottom: 1px solid var(--color-grey-dark);
padding: 30px 0;
max-width: 500px;
}
.cta-section .button-primary {
background-color: var(--color-white);
color: var(--color-blue-main) !important;
margin-top: 20px;
} .offers-section { background-color: var(--color-black); color: var(--color-white); }
.offers-section p { color: var(--color-grey-bg); }
.offers-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; text-align: left; margin-top: 80px; }
.offer-card { border: 1px solid var(--color-grey-dark); padding: 40px; }
.offer-card p {color: var(--color-white);}
.offer-card h3 { font-weight: 700; color: var(--color-white); }
.offer-card .result-label { font-family: var(--font-text); font-weight: 700; color: var(--color-blue-main); margin-top: 30px; margin-bottom: 5px; }
.next-steps { margin-top: 80px; }
.next-steps p { font-size: 1.3rem; line-height: 1.8; }  .problem-section .container-narrow { max-width: 900px; } .vertical-slider-wrapper{
display:flex;
flex-direction: row-reverse; gap:30px;
align-items:center;
min-height:400px;
touch-action: pan-y; } .slider-navigation{
flex:0 0 50px;
position:relative;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
align-self:stretch;
}
.slider-track{
position:absolute;
top:0; bottom:0; left:50%;
width:2px;
background:#cfcfcf;
transform:translateX(-1px);
} .slider-controls{
position:relative; z-index:2;
display:flex; flex-direction:column;
align-items:center; justify-content:space-between;
height:100%;
}
.slider-control{
background:none !important; border:0 !important; cursor:pointer;
padding:10px; transition: transform .2s ease;
}
@media (hover:hover){
.slider-control:hover{ transform: scale(1.12); }
} .slider-dots{
list-style:none; margin:0; padding:0;
display:flex; flex-direction:column;
justify-content:space-between; align-items:center;
height:70%;
}
.slider-dots li{ margin:0; }
.slider-dots button{
width:12px; height:12px;
background:transparent;
border:2px solid var(--color-grey-light);
border-radius:2px; padding:0; display:block;
transform: translateX(-1px); transition: background .2s ease, border-color .2s ease, transform .2s ease;
cursor:pointer;
}
.slider-dots button:hover{ border-color: var(--color-blue-main); }
.slider-dots button.active,
.slider-dots button[aria-current="true"]{
background: var(--color-blue-main);
border-color: var(--color-blue-main);
transform: translateX(-1px) scale(1.1);
}
.slider-dots button:focus-visible{
outline:2px solid #fff;
outline-offset:2px;
box-shadow:0 0 0 3px rgba(0,87,255,.35);
border-color: var(--color-blue-main);
} .slider-content{ flex:1; text-align:center; margin-left: 74px; }
.slide{ display:none; animation: vs-fade .28s ease; }
.slide.active{ display:block; }
@keyframes vs-fade{
from{ opacity:0; transform: translateY(6px); }
to  { opacity:1; transform:none; }
} @media (prefers-reduced-motion: reduce){
.slider-control, .slider-dots button{ transition:none; }
.slide{ animation:none; }
} .slide .icon{
width:40px; height:30px; margin:0 auto 25px;
background:var(--color-blue-main);
box-shadow:-3px 3px 0 #E60023, 3px -3px 0 #0070F3;
}
.slide h3{
font-family:var(--font-text);
font-style:italic;
font-size:1.8rem;
font-weight:500;
color:var(--color-black);
margin-bottom:20px;
}
.slide .quote-source{
margin:-10px 0 18px;
color:var(--color-grey-light);
font-size:.95rem; line-height:1.4;
}
.slide .quote-source cite{ font-style:normal; }
.slide .subtext{ color:var(--color-grey-light); }  @media (max-width: 768px){ .slider-navigation{
flex-basis: 40px; } .slider-dots{
gap: 22px; } .slider-dots button{
width: 16px; height: 16px;
border-width: 2px; transform: translateX(-1px); } .slider-dots button.active,
.slider-dots button[aria-current="true"]{
transform: translateX(-1px) scale(1.12);
} .slider-control{ padding: 8px; }
.slider-control svg{ width: 20px; height: 20px; }
.slider-content {
margin-left: 20px;
}
}