@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
--neon-green: #2CFF05;
--pure-black: #000000;
--pure-white: #FFFFFF;
--light-gray: #F5F5F5;
}

body {
font-family: 'Montserrat', sans-serif;
background-color: var(--pure-white);
color: var(--pure-black);
scroll-behavior: smooth;
overflow-x: hidden;
}

#interactive-bg {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: -1;
filter: blur(80px);
opacity: 0.6;
}

h1, h2, h3, h4, .headline-font {
font-family: 'Inter', sans-serif;
}

.neon-box {
background-color: var(--neon-green);
border: 1.5px solid var(--pure-black);
padding: 2px 6px;
display: inline-block;
font-weight: 700;
color: var(--pure-black);
text-transform: uppercase;
font-size: 0.85em;
}

.standout-text {
position: relative;
display: inline-block;
padding: 0 6px;
font-weight: 800;
color: var(--pure-black);
z-index: 1;
}

.standout-text::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--neon-green);
z-index: -1;
transform: rotate(-1deg) skewX(-5deg);
border: 1px solid var(--pure-black);
}

.btn-primary {
background-color: var(--neon-green);
color: var(--pure-black);
font-weight: 700;
padding: 0.7rem 1.5rem;
border: 1.5px solid var(--pure-black);
transition: all 0.2s ease;
text-transform: uppercase;
letter-spacing: 0.05em;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 10;
}

.btn-primary:hover {
transform: translate(-3px, -3px);
box-shadow: 4px 4px 0px var(--pure-black);
}

.nav-link {
font-weight: 700;
font-size: 0.8rem;
position: relative;
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
}

.nav-link:after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 0;
background-color: var(--neon-green);
transition: width 0.3s ease;
}

.nav-link:hover:after {
width: 100%;
}

.feature-asset-container {
border: 2px solid var(--pure-black);
background: #F9F9F9;
position: relative;
min-height: 450px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}

.asset-shadow {
position: relative;
}
.asset-shadow::before {
content: "";
position: absolute;
top: 15px;
left: 15px;
width: 100%;
height: 100%;
background: var(--neon-green);
border: 2px solid black;
z-index: -1;
}
.section-divider {
height: 1.5px;
background-color: var(--pure-black);
width: 100%;
}

.sticky-nav-active {
background-color: white;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.feature-row {
display: flex;
flex-direction: column;
gap: 4rem;
align-items: center;
padding: 8rem 0;
opacity: 0;
transform: translateY(30px);
transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.feature-row.reveal {
opacity: 1;
transform: translateY(0);
}

@media (min-width: 1024px) {
.feature-row {
flex-direction: row;
gap: 6rem;
}
.feature-row.reverse {
flex-direction: row-reverse;
}
.feature-content {
width: 45%;
}
.feature-asset {
width: 55%;
}
}

/* --- Custom Keyframe Animations --- */
@keyframes float {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }
}

@keyframes scan {
0% { top: 0%; opacity: 0; }
50% { opacity: 0.5; }
100% { top: 100%; opacity: 0; }
}

@keyframes draw-path {
to { stroke-dashoffset: 0; }
}

@keyframes spin-slow {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

@keyframes label-slide {
0% { transform: translateX(-100%); opacity: 0; }
100% { transform: translateX(0); opacity: 1; }
}

.animate-float { animation: float 3s ease-in-out infinite; }
.animate-scan { animation: scan 3s linear infinite; }
.animate-spin-slow { animation: spin-slow 8s linear infinite; }
.feature-icon-wrapper {
position: relative;
width: 80px;
height: 80px;
background: white;
border: 2px solid black;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 4px 4px 0px black;
}

.feature-row.reveal .animate-draw {
stroke-dasharray: 100;
stroke-dashoffset: 100;
animation: draw-path 1.5s forwards ease-in-out;
}

.feature-row.reveal .animate-label-in {
animation: label-slide 0.6s 0.5s forwards cubic-bezier(0.16, 1, 0.3, 1);
opacity: 0;
}