:root {
--nv:  #050f1c;       
--b2:  #0f4c81;       
--tl:  #0d9488;       
--gn:  #059669;       
--mn:  #00d4b4;       
--wh:  #fff;          
--of:  #f5f9fb;       
--g1:  #e4edf3;       
--t1:  #050f1c;
--t2:  #152d3e;
--t3:  #2a4e63;
--t2c: #1a3548;
--ga:  linear-gradient(90deg, #0f4c81, #0d9488, #00d4b4);
--f:   'Helvetica Neue', Helvetica, Arial, sans-serif;
--ease: cubic-bezier(.25, .46, .45, .94);
--sh:  0 2px 20px rgba(5,15,28,.07), 0 0 0 1px rgba(5,15,28,.04);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
font-family: var(--f);
font-size: 16px;
line-height: 1.75;
background: var(--wh);
color: var(--t1);
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
p {
font-size: 1rem;
line-height: 1.78;
color: var(--t2);
font-weight: 500;
max-width: 68ch;
}
.h2 {
font-size: clamp(1.75rem, 3.5vw, 2.8rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1.08;
color: var(--t1);
}
.h2w { color: var(--wh); }
.tag {
display: inline-block;
font-size: .65rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--tl);
margin-bottom: .75rem;
}
.lead {
font-size: 1.05rem;
line-height: 1.78;
color: var(--t2);
font-weight: 500;
max-width: 480px;
}
.sec { padding: 4.5rem 5%; }
.sec-inner { max-width: 1280px; margin: 0 auto; }
.noise {
position: fixed;
inset: 0;
z-index: 1;
pointer-events: none;
opacity: .018;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
background-size: 200px;
}
@media (pointer: fine) {
body { cursor: none; }
#cd {
width: 8px; height: 8px;
background: var(--mn);
border-radius: 50%;
position: fixed;
left: -20px; top: -20px;
pointer-events: none;
z-index: 9999;
transform: translate(-50%, -50%);
transition: width .15s, height .15s;
}
#cr {
width: 32px; height: 32px;
border: 1.5px solid rgba(0, 212, 180, .38);
border-radius: 50%;
position: fixed;
left: -40px; top: -40px;
pointer-events: none;
z-index: 9998;
transform: translate(-50%, -50%);
}
body:has(a:hover) #cd, body:has(button:hover) #cd { width: 11px; height: 11px; }
body:has(a:hover) #cr, body:has(button:hover) #cr { width: 46px; height: 46px; border-color: rgba(0, 212, 180, .15); }
}
.rv {
opacity: 0;
transform: translateY(20px);
transition: opacity .65s ease, transform .65s ease;
}
.rv.on { opacity: 1; transform: translateY(0); }
.d1 { transition-delay: .1s; }
.d2 { transition-delay: .2s; }
.d3 { transition-delay: .3s; }
.d4 { transition-delay: .4s; }
.btn-primary {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--f);
font-size: .75rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
padding: .85rem 1.75rem;
border-radius: 50px;
background: var(--mn);
color: var(--nv);
text-decoration: none;
transition: transform .22s, box-shadow .22s;
white-space: nowrap;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 32px rgba(0, 212, 180, .42);
}
.btn-primary.btn-dark,.btn-primary[style*="background:var(--nv)"]{color:var(--wh) !important}
.btn-primary.btn-dark:hover{box-shadow:0 10px 32px rgba(5,15,28,.35)}
/* Ensure mint CTA button always has dark text (high contrast) */
.btn-primary{color:var(--nv) !important;font-weight:700}
/* Dark-bg CTA variant: white text on navy */
.gtm-card .btn-primary,.mkt-right .btn-primary,.nwnf-btn,.n-mega-btn,.mob-cta{background:var(--mn);color:var(--nv) !important}
/* Form submit button */
.form-submit{background:var(--mn);color:var(--nv);font-weight:700;font-size:.78rem;letter-spacing:.08em}
.btn-ghost {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--f);
font-size: .75rem;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
padding: .85rem 1.5rem;
border-radius: 50px;
color: rgba(255, 255, 255, .52);
border: 1px solid rgba(255, 255, 255, .12);
text-decoration: none;
transition: all .22s;
white-space: nowrap;
}
.btn-ghost:hover {
color: white;
border-color: rgba(255, 255, 255, .32);
background: rgba(255, 255, 255, .04);
}
.btn-solid {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--f);
font-size: .72rem;
font-weight: 700;
letter-spacing: .09em;
text-transform: uppercase;
padding: .85rem 1.75rem;
border-radius: 50px;
background: var(--mn);
color: var(--nv);
text-decoration: none;
transition: transform .22s, box-shadow .22s;
}
.btn-solid:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 212, 180, .42);
}
.btn-outline {
display: inline-flex;
align-items: center;
gap: 7px;
font-family: var(--f);
font-size: .72rem;
font-weight: 500;
letter-spacing: .07em;
text-transform: uppercase;
padding: .85rem 1.5rem;
border-radius: 50px;
color: rgba(255, 255, 255, .52);
border: 1px solid rgba(255, 255, 255, .12);
text-decoration: none;
transition: all .22s;
}
.btn-outline:hover {
color: white;
border-color: rgba(255, 255, 255, .32);
background: rgba(255, 255, 255, .04);
}
.btn-arr { width: 14px; height: 14px; flex-shrink: 0; }
input[type=range] {
-webkit-appearance: none;
width: 100%;
height: 4px;
background: var(--g1);
border-radius: 2px;
outline: none;
cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 16px; height: 16px;
border-radius: 50%;
background: var(--nv);
border: 2.5px solid var(--tl);
cursor: pointer;
box-shadow: 0 2px 6px rgba(5, 15, 28, .12);
transition: transform .18s;
}
input[type=range]::-webkit-slider-thumb:hover { transform: scale(1.2); }
@keyframes pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: .3; transform: scale(1.5); }
}
@keyframes drift {
0%, 100% { transform: translate(0, 0) scale(1); }
40% { transform: translate(18px, -22px) scale(1.03); }
70% { transform: translate(-12px, 14px) scale(.97); }
}
@keyframes tk {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes mq {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}
@keyframes sl {
0% { transform: scaleY(0); transform-origin: top; }
50% { transform: scaleY(1); transform-origin: top; }
51% { transform: scaleY(1); transform-origin: bottom; }
100% { transform: scaleY(0); transform-origin: bottom; }
}
@keyframes fbf {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-7px); }
}

/* ── TYPOGRAPHY OVERRIDES — HIGH CONTRAST + MEDIUM WEIGHT ── */
/* LIGHT BG: all body text uses --t2 (#152d3e) = 13.5:1 on white */
.sc p,.how-desc,.gtm-desc,.oon-sub,.mkt-feat-d{font-size:.94rem;line-height:1.72;color:var(--t2);font-weight:500}
.faq-a{font-size:.94rem;line-height:1.78;color:var(--t2);font-weight:500}
.feat-r span{font-size:.92rem;color:var(--t1);font-weight:500}
.stat-l{font-size:.78rem;color:var(--t1);font-weight:600}
.abl{color:var(--t1);font-weight:600}
.abs{color:var(--t2);font-size:.78rem;font-weight:500}
.calc-proof-item{font-size:.9rem;color:var(--t2);font-weight:500}
.calc-sub{color:var(--t2) !important;font-weight:500}
/* DARK BG: white text, high opacity, medium weight */
.dark p,section.oon p,section.gtm p,section.prs p,section.tst p,section.ctas p{color:rgba(255,255,255,.85);font-size:.96rem;font-weight:500}
.dark .lead,section.oon .lead,section.gtm .lead,section.ctas .lead{color:rgba(255,255,255,.78);font-weight:500}
.gtm-desc,.gtm-desc-a,.gtm-desc-b,.pvp-d,.mkt-sub,.nwnf-desc{color:rgba(255,255,255,.78);font-weight:500}
.tst-q{font-size:.98rem;line-height:1.82;color:rgba(255,255,255,.92);font-weight:500}
.psd{font-weight:500}
.pst{font-weight:600}
/* Blog article text */
article p,article li{font-size:1.05rem;line-height:1.85;color:var(--t1);font-weight:500}
article h2{color:var(--t1);margin:2rem 0 1rem}
article h3{color:var(--t1);margin:1.5rem 0 .75rem}
/* Card description text on light bg */
.n-mega-cta-desc{font-weight:500}
.mkt-plan-desc{font-weight:500}
/* Footer */
.ft-tag{font-size:.84rem;line-height:1.72;color:rgba(255,255,255,.55);font-weight:500}
.ft-col ul a{font-size:.82rem;color:rgba(255,255,255,.6);font-weight:500}
.ft-col ul a:hover{color:var(--wh)}
.ft-col h5{font-size:.74rem;font-weight:700}
:focus-visible{outline:2px solid #00d4b4;outline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid #00d4b4;outline-offset:3px}