:root{

--bg:#03060c;

--blue:#003C97;
--green:#00A651;
--mint:#34E89A;
--gold:#F2B33D;

--text:#ffffff;

--muted:rgba(255,255,255,.72);
--faint:rgba(255,255,255,.46);

--glass:rgba(255,255,255,.05);
--border:rgba(255,255,255,.08);
--border-strong:rgba(255,255,255,.16);

--radius-card:20px;
--radius-btn:100px;
--radius-icon:12px;

--container:1320px;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
background:var(--bg);
color:white;
overflow-x:hidden;
font-family:Inter,sans-serif;
}

a{
text-decoration:none;
color:inherit;
}

button{
font-family:inherit;
border:none;
cursor:pointer;
}

img{
display:block;
max-width:100%;
}

.container{
width:min(92%, 1360px);
margin:auto;
}

.section{
padding:140px 0;
position:relative;
}

.eyebrow{
display:flex;
align-items:center;
justify-content:center;

gap:12px;

font-family:"JetBrains Mono",monospace;
font-size:13px;

letter-spacing:.22em;

text-transform:uppercase;

color:var(--mint);

margin-bottom:24px;
}

.section-title{

font-family:Manrope,sans-serif;

font-size:clamp(48px,6vw,82px);

font-weight:800;

line-height:.95;

text-align:center;

max-width:1080px;

margin:auto;
}

.section-subtitle{

    max-width:820px;

    margin:32px auto 0;

    text-align:center;

    font-size:23px;

    line-height:1.8;

    font-weight:500;

    color:var(--muted);

}

.glass{

background:rgba(255,255,255,.03);

border:1px solid var(--border);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);
}

.reveal{

opacity:1;

transform:none;

transition:
opacity .8s ease,
transform .8s ease;
}

.reveal.show{

opacity:1;

transform:translateY(0);
}

::-webkit-scrollbar{
width:10px;
}

::-webkit-scrollbar-track{
background:#050912;
}

::-webkit-scrollbar-thumb{
background:linear-gradient(
180deg,
var(--green),
var(--mint)
);

border-radius:100px;
}

@media(max-width:768px){

.section{
padding:80px 0;
}

.section-title{
font-size:48px;
}

.section-subtitle{
font-size:18px;
}
}

/* =========================
   BACKGROUND SYSTEM
========================= */

#bg-canvas{

position:fixed;

inset:0;

width:100%;
height:100%;

z-index:-50;
}

.bg-overlay{

position:fixed;

inset:0;

background:
linear-gradient(
180deg,
rgba(3,6,12,.42),
rgba(3,6,12,.52),
rgba(3,6,12,.65)
);

pointer-events:none;

z-index:-40;
}

.grain{

position:fixed;

inset:0;

pointer-events:none;

opacity:.035;

background-image:
radial-gradient(
rgba(255,255,255,.8) 1px,
transparent 1px
);

background-size:4px 4px;

z-index:-35;
}

#cursor-glow{

position:fixed;

width:420px;
height:420px;

border-radius:50%;

pointer-events:none;

transform:translate(-50%,-50%);

background:
radial-gradient(
circle,
rgba(52,232,154,.10),
rgba(0,60,151,.06),
transparent 70%
);

z-index:-30;
}

#scroll-progress{

position:fixed;

top:0;
left:0;

height:2px;

width:0%;

background:
linear-gradient(
90deg,
var(--green),
var(--mint),
var(--gold)
);

z-index:99999;
}

/* ======================
   NAVBAR
====================== */

.navbar{

position:fixed;

top:0;
left:0;
width:100%;

padding:20px 0;

background:transparent;

backdrop-filter:blur(0px);

-webkit-backdrop-filter:blur(0px);

transition:

background .45s ease,

backdrop-filter .45s ease,

padding .35s ease,

box-shadow .35s ease,

border-color .35s ease;

z-index:1000;

}

.navbar.scrolled{

padding:12px 0;

background:rgba(6,10,18,.68);

backdrop-filter:blur(22px);

-webkit-backdrop-filter:blur(22px);

border-bottom:1px solid rgba(255,255,255,.06);

box-shadow:

0 10px 40px rgba(0,0,0,.30);

}

.nav-inner{

height:76px;

display:flex;

align-items:center;

justify-content:space-between;

gap: 48px;
}

.logo{

    display:flex;

    align-items:center;

    gap:12px;

    flex-shrink:0;

}

.logo-icon{

display:flex;
align-items:center;
justify-content:center;
}

.logo-img{

    width:34px;

    height:34px;

    object-fit:contain;

}

.nav-links{

display:flex;

align-items:center;

justify-content:center;

gap:42px;

flex:1;

}

.nav-links a{

position:relative;

font-size:16px;

font-weight:600;

letter-spacing:.01em;

color:rgba(255,255,255,.78);

transition:

color .35s ease,

transform .35s ease;

}

.nav-links a::after{

content:"";

position:absolute;

left:50%;

bottom:-10px;

width:0;

height:2px;

transform:translateX(-50%);

background:linear-gradient(
90deg,
var(--green),
var(--mint)
);

transition:.35s;

border-radius:100px;

}

.nav-links a:hover{

color:white;

transform:translateY(-2px);

}

.nav-links a:hover::after{

width:100%;
}

.waitlist-btn{

    height:56px;

    padding:0 34px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

    font-size:16px;

    font-weight:700;

    background:linear-gradient(
        135deg,
        var(--green),
        var(--mint)
    );

    color:#04140b;

    box-shadow:
        0 12px 35px rgba(52,232,154,.22);

    transition:
        transform .35s,
        box-shadow .35s;

}

.waitlist-btn:hover{

transform:translateY(-4px);

box-shadow:
0 18px 45px rgba(52,232,154,.35);

filter:brightness(1.05);

}

/* ======================
   NAVBAR RESPONSIVE
====================== */

@media (max-width:1200px){

    .nav-links{

        gap:30px;

    }

    .nav-links a{

        font-size:14px;

    }

    .waitlist-btn{

        padding:0 20px;

        font-size:15px;

    }

}

@media (max-width:1180px){

    .nav-inner{

        gap:18px;

    }

    .logo{

        transform:scale(.92);

        transform-origin:left center;

    }

    .nav-links{

        gap:18px;

    }

    .nav-links a{

        font-size:14px;

    }

    .waitlist-btn{

        height:48px;

        padding:0 20px;

        font-size:15px;

    }

}

@media (max-width:992px){

    .nav-links{

        display:none;

    }

    .waitlist-btn{

        margin-left:auto;

    }

}

@media(max-width:768px){

.waitlist-btn{

height:46px;

padding:0 18px;

font-size:14px;

}

}


/* =========================================================
   HERO - LAYOUT
========================================================= */

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:165px;

    padding-bottom:120px;

}

.hero-container{

    position:relative;

    z-index:5;

    width:min(92%,1400px);

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    padding-bottom:290px;

}

.hero-content{

    width:100%;
    max-width:1260px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    text-align:center;

    position:relative;

    z-index:2;
}

.hero-eyebrow{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:12px;

    margin-bottom:34px;
}

.hero-dot{

    width:8px;
    height:8px;

    border-radius:50%;

    background:var(--mint);

    flex-shrink:0;
}

.hero-title{

    width:100%;

    margin-bottom:32px;
}

.hero-description{

    width:100%;
    max-width:980px;

    margin:0 auto;
}

.hero-small{

    width:100%;
    max-width:900px;

    margin-top:34px;
}

.hero-buttons{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:26px;

    margin-top: 72px;

    flex-wrap:wrap;

    position:relative;

    z-index:3;
}

.hero-bottom{

    margin-top:70px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:26px;

    width:100%;

}

.founding{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    max-width:500px;

    text-align:center;

}

.scroll-indicator{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:14px;

}

.scroll-line{

    width:1px;

    height:96px;

    background:rgba(255,255,255,.15);

    position:relative;

    overflow:hidden;

}


/* =========================================================
   HERO RESPONSIVE
========================================================= */

@media (max-width:1200px){

.hero{

padding-top:100px;
padding-bottom:120px;

}

.hero-content{

max-width:900px;

}

}

@media (max-width:992px){

.hero{

padding-top:90px;
padding-bottom:120px;

}

.hero-buttons{

flex-direction:column;

width:100%;
}

}

@media (max-width:768px){

.hero{

padding-top:120px;
padding-bottom:40px;

min-height:auto;

}

.hero-content{

max-width:100%;

}

.hero-buttons{

gap:16px;

}

.hero-bottom{

margin-top:40px;

}

}

@media(max-width:480px){

.hero{

padding-top:120px;

}

.hero-buttons{

width:100%;

}

}

/* =========================================================
   HERO TYPOGRAPHY
========================================================= */

.hero-eyebrow{

    font-family:"JetBrains Mono", monospace;

    font-size:14px;

    letter-spacing:.30em;

    text-transform:uppercase;

    color:var(--mint);

    font-weight:500;
}

.hero-title{

    font-family:Manrope,sans-serif;

    font-size:clamp(74px,8.5vw,142px);

    font-weight:800;

    line-height:.88;

    letter-spacing:-5px;

    max-width:1180px;

    margin:auto;

    color:white;
}

.hero-description{

    margin-top:12px;

    font-size:25px;

    line-height:1.75;

    color:var(--muted);

    font-weight:500;
}

.hero-small{

    font-size:22px;

    line-height:1.8;

    color:var(--faint);
}


.hero-primary{

    height:74px;

    padding:0 42px;

    min-width:330px;

    border-radius:999px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(
        135deg,
        var(--green),
        var(--mint)
    );

    color:#03150c;

    font-weight:700;

    font-size:19px;

    transition:.35s;
}

.hero-primary:hover{

    transform:translateY(-4px);

    box-shadow:
    0 20px 45px rgba(52,232,154,.35);

}


.hero-secondary{

    height:74px;

    padding:0 42px;

    min-width:330px;

    border-radius:999px;

    border:1px solid var(--border);

    background:rgba(255,255,255,.03);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:600;

    font-size:19px;

    backdrop-filter:blur(12px);

    transition:.35s;
}

.hero-secondary:hover{

    border-color:var(--mint);

    transform:translateY(-4px);

    background:rgba(255,255,255,.05);
}


.founding{

    font-family:"JetBrains Mono", monospace;

    font-size:14px;

    letter-spacing:.24em;

    text-transform:uppercase;

    color:#d5d5d5;
}

.founding::before{

    content:"";

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--gold);

    display:inline-block;

    margin-right:8px;
}

.scroll-indicator{

    color:white;

    font-family:"JetBrains Mono", monospace;

    font-size:13px;

    letter-spacing:.22em;

    text-transform:uppercase;

    opacity:.9;
}


.scroll-line{

    position:relative;

    overflow:hidden;
}

.scroll-line::after{

    content:"";

    position:absolute;

    left:0;

    width:100%;

    height:26px;

    background:

    linear-gradient(

        to bottom,

        transparent,

        rgba(255,255,255,.9),

        transparent

    );

    animation:scrollLine 2s ease-in-out infinite;

}

@keyframes scrollLine{

0%{
transform:translateY(-100%);
}

100%{
transform:translateY(320%);
}

}

@media(max-width:992px){

.hero-title{

font-size:72px;

}

.hero-description{

font-size:22px;

}

.hero-small{

font-size:18px;

}

}

@media(max-width:768px){

.hero-title{

font-size:46px;

line-height:.95;

letter-spacing:-1px;

}

.hero-description{

font-size:18px;

line-height:1.65;

}

.hero-small{

font-size:17px;

}

.hero-primary,
.hero-secondary{

width:100%;

max-width:360px;

margin:auto;

}

}

@media(max-width:480px){

.hero-title{

font-size:42px;

}

.hero-description{

font-size:17px;

}

.hero-small{

font-size:15px;

}

}

@media(max-width:768px){

.scroll-indicator{

display:none;

}

}
/* ======================================
   HERO STATS CARD
====================================== */

.hero-stats{

    position:absolute;

    left:50%;

    bottom:-190px;

    transform:translateX(-50%);

    width:min(92%,1450px);

    display:grid;

    grid-template-columns:repeat(4,1fr);

    overflow:hidden;

    border-radius:34px;

    padding:34px 0;

    z-index:1;

    
    background:
linear-gradient(
180deg,
rgba(80,255,180,.06),
rgba(255,255,255,.03) 18%,
rgba(255,255,255,.02)
);

    backdrop-filter:blur(24px);

    border:1px solid rgba(255,255,255,.05);
box-shadow:

    inset 0 1px rgba(255,255,255,.06),

    0 35px 90px rgba(0,0,0,.40);

}

.hero-stat{

    padding:48px 28px 60px;

    min-height:250px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:flex-start;

    text-align:center;

    position:relative;

}

.hero-stat:not(:last-child){

    border-right:1px solid rgba(255,255,255,.045);

}

.hero-stat h3{

    font-family:Manrope,sans-serif;

    font-size:60px;

    font-weight:800;

    color:var(--mint);

    margin-bottom:20px;
}

.hero-stat p{

    font-size:19px;

    line-height:1.6;

    color:var(--muted);

    max-width:190px;

    margin:0 auto;

}

@media(max-width:1100px){

.hero-stats{

grid-template-columns:repeat(2,1fr);

bottom:-170px;

}

.hero-stat:nth-child(2){

border-right:none;

}

}

@media(max-width:768px){

.hero-container{

    display:block;

    width:92%;

    padding-bottom:0;

}

.hero-stats{

    position:relative;

    left:auto;

    bottom:auto;

    transform:none;

    margin-top:60px;

    width:100%;

    grid-template-columns:1fr;

}

.hero-stat{

    border-right:none !important;

    border-bottom:1px solid rgba(255,255,255,.08);

}

.hero-stat:last-child{

    border-bottom:none;

}

.problem{

    padding-top:100px;

}
}


/* =========================================================
   PROBLEM SECTION - LAYOUT
========================================================= */

.problem{

    position:relative;

    padding-top:320px;
    padding-bottom:180px;
}

.problem-grid{

    margin-top:70px;

    display:grid;

    grid-template-columns:1fr 1fr;

    overflow:hidden;

    border-radius:30px;

    position:relative;

    max-width:1450px;

    margin-inline:auto;

}

/* ==========================================
   PROBLEM SECTION - GLASS STYLE
========================================== */

.problem-grid{

    background:rgba(15,18,24,.55);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.06);

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 30px 90px rgba(0,0,0,.35);

}


.problem-grid::before{

content:"";

position:absolute;

inset:-80px;

background:
radial-gradient(circle at 30% 10%,
rgba(74,255,166,.12),
transparent 45%),

radial-gradient(circle at 70% 0%,
rgba(74,255,166,.08),
transparent 50%);

pointer-events:none;

z-index:-1;

filter:blur(60px);

}

.problem-grid::after{

content:"";

position:absolute;

left:0;

right:0;

top:0;

height:120px;

background:

linear-gradient(

180deg,

rgba(76,255,171,.06),

transparent

);

pointer-events:none;

}

.problem-column{

    padding:78px 72px;

    position:relative;

}

.problem-label{

    font-family:"JetBrains Mono", monospace;

    font-size:13px;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:rgba(255,255,255,.82);

    margin-bottom:24px;

}


.problem-column:first-child{

border-right:1px solid rgba(255,255,255,.05);

}

.problem-footer{

    margin-top:70px;

    text-align:center;

    color:#ffffff;

    font-size:30px;

    font-weight:700;

    letter-spacing:-0.02em;

}

.problem-column h3{

    font-family:Manrope,sans-serif;

    font-size:50px;

    font-weight:800;

    line-height:1.08;

    margin-top:0;

    margin-bottom:32px;

}

.problem-column h4{

    margin-bottom:28px;

}

.problem-column p{

    color:#9ca3af;

    line-height:1.8;

}

.problem-column ul{

    display:flex;

    flex-direction:column;

    gap:26px;

    list-style:none;

    padding:0;

    margin:0;
}

.problem-column li{

    display:flex;

    align-items:flex-start;

    gap:16px;

    padding:0 0 20px;

    border-bottom:1px solid rgba(255,255,255,.05);

    color:#d7d7d7;

    line-height:1.75;

    font-size:19px;

}

.problem-column li:last-child{

    padding-bottom:0;

    border-bottom:none;

}

.problem-column li::before{

    content:"";

    width:9px;

    height:9px;

    border-radius:50%;

    margin-top:10px;

    flex-shrink:0;

    background:var(--mint);

    box-shadow:0 0 12px #58f2a0;
}


@media(max-width:992px){

.problem{

padding-top:340px;

}

.problem-grid{

grid-template-columns:1fr;

}

.problem-column:first-child{

border-right:none;

border-bottom:1px solid rgba(255,255,255,.08);

}

}

@media(max-width:768px){

.problem-column{

padding:42px 28px;

}

.problem{

padding-top:50px;

}

}


/* =========================================================
   RECOVERY JOURNEY - LAYOUT
========================================================= */

.journey{

    position:relative;

    padding:180px 0;
}

.journey-wrapper{

    position:relative;

    margin-top:70px;

    max-width:1120px;

    margin-left:auto;

    margin-right:auto;
}

/* Vertical Timeline */

.journey-line{

    position:absolute;

    left:50%;

    top:0;

    bottom:0;

    width:2px;

    transform:translateX(-50%);
}

/* Each Step */

.journey-step{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:120px;
}

.journey-step:last-child{

    margin-bottom:0;
}

/* Timeline Circle */

.journey-circle{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:74px;

    height:74px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    z-index:5;

    font-family:Manrope,sans-serif;

    font-size:24px;

    font-weight:800;
}

/* Card */

.journey-card{

    width:43%;

    padding:40px;

    border-radius:28px;

    position:relative;

    overflow:hidden;
}

/* Alternate Layout */

.journey-step:nth-child(even){

    flex-direction:row-reverse;
}

/* Label */

.journey-label{

    display:inline-block;

    margin-bottom:18px;
}

.journey-card h3{

    margin-bottom:18px;
}

.journey-card p{

    line-height:1.8;
}


@media(max-width:900px){

.journey-line{

left:35px;

transform:none;

}

.journey-step{

flex-direction:row !important;

padding-left:72px;

margin-bottom:70px;

}

.journey-circle{

left:35px;

transform:translateX(-50%);

}

.journey-card{

width:100%;

}

.journey-card h3{

    font-size:28px;

}

.journey-card{

    padding:28px;

}

}

/* =========================================================
   RECOVERY JOURNEY - PREMIUM STYLING
========================================================= */

.journey-line{

background:linear-gradient(
180deg,
transparent,
rgba(52,232,154,.95),
transparent
);

box-shadow:

0 0 12px rgba(52,232,154,.18);

}

/* Number Circle */

.journey-circle{

    background:rgba(18,24,30,.95);

    border:1px solid rgba(52,232,154,.35);

    color:var(--mint);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 0 35px rgba(52,232,154,.18),
        inset 0 1px rgba(255,255,255,.08);

    transition:.35s;
}

/* Glass Card */

.journey-card{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.04),

        0 30px 70px rgba(0,0,0,.30);

    transition:
     transform .4s ease,
     box-shadow .4s ease,
     border-color .4s ease;
}

/* Small Label */

.journey-label{

    font-family:"JetBrains Mono", monospace;

    font-size:13px;

    letter-spacing:.25em;

    color:var(--mint);

    text-transform:uppercase;
}

/* Heading */

.journey-card h3{

    font-family:Manrope,sans-serif;

    font-size:34px;

    font-weight:800;

    line-height:1.15;

    color:white;
}

/* Description */

.journey-card p{

    color:var(--muted);

    font-size:18px;

    line-height:1.85;

}

/* Hover */

.journey-step:hover .journey-card{

    transform:translateY(-8px);

    border-color:rgba(52,232,154,.25);

    box-shadow:

        0 30px 90px rgba(0,0,0,.45),

        0 0 45px rgba(52,232,154,.08);

}

.journey-step:hover .journey-circle{

    transform:translateX(-50%) scale(1.08);

    box-shadow:

        0 0 40px rgba(52,232,154,.45);

}


.journey::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(

        circle at 50% 15%,

        rgba(52,232,154,.06),

        transparent 55%

    );

}


.journey-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:90px;

    border-radius:24px 24px 0 0;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.05),

        transparent

    );

    pointer-events:none;

    opacity:.9;

}



/* =========================================================
   JOURNEY SCROLL REVEAL
========================================================= */

.journey-step{

    opacity:0;

    transform:translateY(50px);

    transition:

        opacity .8s ease,

        transform .8s ease;

}

.journey-step.visible{

    opacity:1;

    transform:translateY(0) scale(1);

}

.journey-circle{

    transform:translateX(-50%) scale(.6);

    transition:

        transform .55s ease,

        box-shadow .35s ease;

}

.journey-step.visible .journey-circle{

    transform:translateX(-50%) scale(1);

}


/* =========================================================
   WHY JOIN EARLY - LAYOUT
========================================================= */

.why-join{

    position:relative;

    padding:170px 0;
}

.benefits-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:28px;

    border-radius:30px;
}

.benefit-card{

    position:relative;

    padding:42px 34px;

    border-radius:28px;

    overflow:hidden;

    transition:.35s;
}

.benefit-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    font-size:30px;
}

.benefit-card h3{

    margin-bottom:18px;

    font-family:Manrope,sans-serif;

    font-size:28px;

    font-weight:800;

    line-height:1.2;
}

.benefit-card p{

    color:var(--muted);

    line-height:1.8;

    font-size:17px;
}


/* =========================================================
   WHY JOIN EARLY - PREMIUM STYLING
========================================================= */

.benefit-card{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.05);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.04),
        0 25px 60px rgba(0,0,0,.28);
}

.benefit-icon{

    background:rgba(52,232,154,.08);

    border:1px solid rgba(52,232,154,.18);

    color:var(--mint);

    box-shadow:
        0 0 25px rgba(52,232,154,.10);
}

.benefit-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:90px;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.05),

        transparent

    );

    pointer-events:none;
}

.benefit-card:hover{

    transform:translateY(-8px) scale(1.015);

    border-color:rgba(52,232,154,.22);

    box-shadow:
        0 35px 90px rgba(0,0,0,.38),
        0 0 45px rgba(52,232,154,.08);
}

.benefit-card:hover .benefit-icon{

    transform:scale(1.08);

    transition:.3s;
}


@media(max-width:1100px){

.benefits-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:700px){

.benefits-grid{

grid-template-columns:1fr;

}

.benefit-card{

padding:32px 26px;

}

.benefit-card h3{

font-size:24px;

}

}

/* =========================================================
   FOUNDING MEMBER ACCESS - LAYOUT
========================================================= */

.founding-section{

    position:relative;

    padding:170px 0;
}

.founding-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:36px;
}

.founding-card{

    position:relative;

    padding:48px;

    border-radius:30px;

    overflow:hidden;

    transition:.35s;
}

.founding-tag{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:36px;

    padding:0 18px;

    border-radius:100px;

    margin-bottom:28px;

    font-family:"JetBrains Mono",monospace;

    font-size:12px;

    letter-spacing:.18em;

    text-transform:uppercase;
}

.founding-card h3{

    font-family:Manrope,sans-serif;

    font-size:42px;

    font-weight:800;

    line-height:1.1;

    margin-bottom:34px;
}

.founding-card ul{

    list-style:none;

    display:flex;

    flex-direction:column;

    gap:18px;

    margin-bottom:40px;
}

.founding-card li{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--muted);

    line-height:1.6;
}

.founding-card li::before{

    content:"✓";

    color:var(--mint);

    font-weight:700;
}

/* Progress */

.progress-wrapper{

    margin-top:10px;

    margin-bottom:34px;
}

.progress-track{

    width:100%;

    height:8px;

    border-radius:100px;

    overflow:hidden;

    background:
      linear-gradient(
              90deg,
            rgba(255,255,255,.06),
            rgba(255,255,255,.10)
);

    margin-bottom:12px;
}

.progress-fill{

    width:0;

    height:100%;

    border-radius:100px;

    background:

    linear-gradient(

        90deg,

        var(--green),

        var(--mint)

    );

    transition: width 1.6s cubic-bezier(.22,1,.36,1);

    box-shadow:
0 0 24px rgba(52,232,154,.45);

}



.progress-wrapper span{

    color:var(--muted);

    font-size:14px;
}

.founding-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:58px;

    border-radius:100px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.04);

    font-weight:600;

    transition:.35s;
}

/* =========================================================
   FOUNDING MEMBER ACCESS - PREMIUM
========================================================= */

.founding-card{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.04),

        0 30px 70px rgba(0,0,0,.30);
}

.founding-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:120px;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.05),

        transparent

    );

}

.founding-tag{

    background:rgba(242,179,61,.12);

    border:1px solid rgba(242,179,61,.35);

    color:var(--gold);
}


.founding-card:hover{

    transform:translateY(-8px) scale(1.015);

    border-color:rgba(52,232,154,.18);

    box-shadow:

        0 35px 90px rgba(0,0,0,.38),

        0 0 40px rgba(52,232,154,.08);
}

.founding-btn:hover{

    background:rgba(52,232,154,.08);

    border-color:rgba(52,232,154,.22);

    transform:translateY(-2px);

}


@media(max-width:1000px){

.founding-grid{

grid-template-columns:1fr;

}

}

@media(max-width:768px){

.founding-card{

padding:34px;

}

.founding-card h3{

font-size:34px;

}

}

@media(max-width:768px){

.founding{

display:none;

}

}


/* =========================================================
   THERAPIST TESTIMONIALS - LAYOUT
========================================================= */

.testimonials{

    position:relative;

    padding:170px 0;
}

.testimonial-slider{

    margin-top:80px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;
}

/* Track */

.testimonial-track{

    flex:1;

    overflow:hidden;

    position:relative;

    min-height:420px;

}

/* Card */

.testimonial-card{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    padding:42px 36px;

    border-radius:30px;

    min-height:380px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    opacity:0;

    transform:translateX(80px);

    pointer-events:none;

    transition:
        opacity .6s ease,
        transform .6s ease;

}

.testimonial-card.active{

    position:relative;

    opacity:1;

    transform:translateX(0);

    pointer-events:auto;

}

/* Quote */

.quote-mark{

font-size:120px;

font-weight:900;

line-height:.7;

color:rgba(52,232,154,.12);

margin-bottom:18px;

user-select:none;

}

/* Text */

.testimonial-text{

    font-size:19px;

    line-height:1.9;

    color:var(--muted);

    flex:1;
}

/* Author */

.testimonial-author{

    display:flex;

    align-items:center;

    gap:18px;

    margin-top:36px;
}

/* Avatar */

.author-avatar{

width:66px;

height:66px;

border-radius:50%;

display:flex;

align-items:center;

justify-content:center;

font-size:22px;

font-weight:800;

background:

linear-gradient(

135deg,

var(--green),

var(--mint)

);

color:#03140b;

box-shadow:

0 0 25px rgba(52,232,154,.25);

}

/* Name */

.testimonial-author h4{

    font-size:20px;

    margin-bottom:6px;
}

.testimonial-author span{

    color:var(--faint);

    font-size:15px;
}

/* Arrows */

.slider-btn{

width:64px;

height:64px;

border-radius:50%;

background:rgba(15,18,24,.72);

border:1px solid rgba(255,255,255,.08);

backdrop-filter:blur(18px);

color:white;

transition:.35s;

}

.slider-btn:hover{

    transform:translateY(-3px) scale(1.05);

    border-color:rgba(52,232,154,.35);

    background:rgba(52,232,154,.08);

    box-shadow:
        0 12px 35px rgba(52,232,154,.18);

}

/* Dots */

.slider-dots{

    margin-top:42px;

    display:flex;

    justify-content:center;

    gap:12px;
}

.dot{

    width:12px;

    height:12px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    transition:.35s;

    cursor:pointer;

}

.dot.active{

    width:34px;

    border-radius:100px;

    background:var(--mint);

    box-shadow:
        0 0 18px rgba(52,232,154,.35);

}

/* ===========================
   Responsive
=========================== */

@media(max-width:1100px){

.testimonial-track{

grid-template-columns:1fr;

}

.slider-btn{

display:none;

}

.testimonial-card{

min-height:auto;

}

}


.testimonial-card{

    background:rgba(15,18,24,.62);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(22px);

    -webkit-backdrop-filter:blur(22px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.05),

        0 30px 80px rgba(0,0,0,.35);

    overflow:hidden;

}


.testimonial-card::before{

content:"";

position:absolute;

left:0;

right:0;

top:0;

height:110px;

background:

linear-gradient(

180deg,

rgba(52,232,154,.05),

transparent

);

pointer-events:none;

}

.testimonial-card{

transition:.4s;

}

.testimonial-card:hover{

transform:translateY(-8px) scale(1.015);

border-color:rgba(52,232,154,.20);

box-shadow:

0 30px 90px rgba(0,0,0,.40),

0 0 40px rgba(52,232,154,.08);

}


/* =========================================================
   PATIENT TESTIMONIALS
========================================================= */

.patient-testimonials{

    position:relative;

    padding:170px 0;

}

.patient-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:32px;

}

.patient-card{

    position:relative;

    padding:38px;

    border-radius:30px;

    transition:.35s;

}

.patient-header{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:30px;

}

.patient-avatar{

    width:64px;

    height:64px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:
    linear-gradient(
        135deg,
        var(--green),
        var(--mint)
    );

    color:#03140b;

    font-family:Manrope;

    font-size:22px;

    font-weight:800;

}

.patient-header h4{

    font-family:Manrope;

    font-size:22px;

    margin-bottom:6px;

}

.patient-header span{

    color:var(--faint);

}

.patient-card p{

    color:var(--muted);

    line-height:1.9;

    font-size:18px;

}


.patient-card{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.04),

        0 30px 70px rgba(0,0,0,.30);

}

.patient-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:90px;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.05),

        transparent

    );

}

.patient-card:hover{

    transform:translateY(-8px) scale(1.015);

    border-color:rgba(52,232,154,.18);

    box-shadow:

        0 30px 90px rgba(0,0,0,.38),

        0 0 35px rgba(52,232,154,.08);

}

.patient-avatar{

    box-shadow:

        0 0 25px rgba(52,232,154,.22);

}

@media(max-width:1100px){

.patient-grid{

grid-template-columns:1fr;

}

}

/* =========================================================
   OUTCOMES
========================================================= */

.outcomes{

    position:relative;

    padding:170px 0;

}

.outcomes-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:30px;

}

.outcome-card{

    position:relative;

    padding:40px;

    border-radius:30px;

    transition:.35s;

}

.outcome-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:28px;

    font-size:30px;

}

.outcome-card h3{

    font-family:Manrope,sans-serif;

    font-size:28px;

    line-height:1.2;

    margin-bottom:18px;

}

.outcome-card p{

    color:var(--muted);

    line-height:1.8;

    font-size:17px;

}


.outcome-card{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.04),

        0 30px 70px rgba(0,0,0,.30);

}

.outcome-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:100px;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.05),

        transparent

    );

}

.outcome-icon{

    background:rgba(52,232,154,.08);

    border:1px solid rgba(52,232,154,.18);

    color:var(--mint);

    box-shadow:

        0 0 25px rgba(52,232,154,.12);

}

.outcome-card:hover{

    transform:translateY(-8px);

    border-color:rgba(52,232,154,.18);

    box-shadow:

        0 35px 90px rgba(0,0,0,.38),

        0 0 40px rgba(52,232,154,.08);

}


@media(max-width:1100px){

.outcomes-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:768px){

.outcomes-grid{

grid-template-columns:1fr;

}

.outcome-card{

padding:34px;

}

.outcome-card h3{

font-size:24px;

}

}

/* =========================================================
   ROADMAP - LAYOUT
========================================================= */

.roadmap{

    position:relative;

    padding:170px 0;

}

.roadmap-wrapper{

    position:relative;

    margin-top:90px;

    display:grid;

    grid-template-columns:repeat(7,1fr);

    column-gap:18px;

    align-items:start;

    padding-top:80px;
}

/* Horizontal Line */

.roadmap-line{

    position:absolute;

    top:35px;

    left:5%;

    right:5%;

    height:2px;

}

/* Milestone */

.roadmap-item{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;
}

/* Alternate Cards */

.roadmap-item:nth-child(even){

    margin-top:180px;

}

/* Node */

.roadmap-node{

    width:26px;

    height:26px;

    border-radius:50%;

    margin-bottom:26px;

    z-index:5;
}

/* Card */

.roadmap-card{

    width:100%;

    min-height:250px;

    padding:28px;

    border-radius:24px;

    text-align:left;
}

/* Quarter */

.roadmap-quarter{

    display:inline-block;

    margin-bottom:18px;
}

.roadmap-card h3{

    margin-bottom:16px;

}

.roadmap-card p{

    line-height:1.8;

}

@media(max-width:1100px){

.roadmap-wrapper{

display:flex;

flex-direction:column;

gap:42px;

padding-left:70px;

}

.roadmap-line{

left:28px;

top:0;

bottom:0;

width:2px;

height:auto;

right:auto;

}

.roadmap-item{

align-items:flex-start;

margin-top:0 !important;

}

.roadmap-node{

position:absolute;

left:-54px;

top:18px;

margin:0;

}

.roadmap-card{

width:100%;

}

}


/* =========================================================
   ROADMAP - PREMIUM STYLING
========================================================= */

/* Background Line */

.roadmap-line{

    background:rgba(255,255,255,.08);

    overflow:hidden;

    border-radius:100px;

}

/* Animated Line (filled later by JS) */

.roadmap-line::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0%;

    height:100%;

    border-radius:100px;

    background:
    linear-gradient(
        90deg,
        var(--green),
        var(--mint)
    );

    box-shadow:
        0 0 20px rgba(52,232,154,.45);

    transition:width 2s cubic-bezier(.22,1,.36,1);

}

/* Animate Progress Line */

.roadmap.animate .roadmap-line::before{

    width:30%;

}


/* Timeline Node */

.roadmap-node{

    background:#111820;

    border:2px solid rgba(255,255,255,.10);

    box-shadow:
        inset 0 1px rgba(255,255,255,.08);

    transition:.4s;
}

/* Active Nodes */

.roadmap-item.active .roadmap-node{

    background:var(--mint);

    border-color:var(--mint);

    box-shadow:

        0 0 25px rgba(52,232,154,.45),

        0 0 60px rgba(52,232,154,.18);

}

/* Glass Card */

.roadmap-card{

    background:rgba(15,18,24,.62);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.05),

        0 25px 70px rgba(0,0,0,.35);

    transition:.35s;

    position:relative;

    overflow:hidden;

}


/* Top Glow */

.roadmap-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:80px;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.05),

        transparent

    );

}

/* Quarter */

.roadmap-quarter{

    font-family:"JetBrains Mono",monospace;

    font-size:12px;

    letter-spacing:.22em;

    color:var(--mint);

    text-transform:uppercase;

}

/* Heading */

.roadmap-card h3{

    font-family:Manrope,sans-serif;

    font-size:26px;

    line-height:1.25;

    margin-bottom:18px;

}

/* Description */

.roadmap-card p{

    color:var(--muted);

    font-size:16px;

}

.roadmap-card:hover{

    transform:translateY(-8px);

    border-color:rgba(52,232,154,.18);

    box-shadow:

        0 30px 90px rgba(0,0,0,.40),

        0 0 40px rgba(52,232,154,.08);

}

.roadmap-item:not(.active){

    opacity:.72;

}

.roadmap-item.active{

    opacity:1;

}


/* =========================================================
   ROADMAP CONNECTORS
========================================================= */

.roadmap-item{

    position:relative;

}

.roadmap-item::before{

    content:"";

    position:absolute;

    width:2px;

    background:

    linear-gradient(

        180deg,

        rgba(52,232,154,.45),

        transparent

    );

}

@media(min-width:1101px){

.roadmap-item:nth-child(odd)::before{

height:70px;

top:36px;

}

.roadmap-item:nth-child(even)::before{

height:70px;

bottom:240px;

}

}

@media(max-width:1100px){

.roadmap-item::before{

display:none;

}

}


.roadmap-item.active .roadmap-node{

animation:pulseRoadmap 2.8s infinite;

}

@keyframes pulseRoadmap{

0%{

box-shadow:

0 0 0 rgba(52,232,154,.4);

}

50%{

box-shadow:

0 0 35px rgba(52,232,154,.5);

}

100%{

box-shadow:

0 0 0 rgba(52,232,154,.4);

}

}


/* =========================================================
   BUILT IN THE OPEN
========================================================= */

.open-build{

    position:relative;

    padding:170px 0;

}

.open-grid{

    margin-top:80px;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:32px;

}

.open-card{

    position:relative;

    padding:42px;

    border-radius:28px;

    overflow:hidden;

    transition:.35s ease;

}

.open-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    margin-bottom:30px;

    background:
    linear-gradient(
        135deg,
        rgba(0,166,81,.18),
        rgba(52,232,154,.18)
    );

    border:1px solid rgba(52,232,154,.18);

    box-shadow:
        inset 0 1px rgba(255,255,255,.06),
        0 10px 30px rgba(52,232,154,.10);

    transition:.35s;
}

.open-card h3{

    font-family:Manrope,sans-serif;

    font-size:32px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:18px;

    color:white;

}

.open-card p{

    font-size:18px;

    line-height:1.9;

    color:var(--muted);

}

/* ==========================================
   BUILT IN THE OPEN - PREMIUM
========================================== */

.open-card{

    background:rgba(15,18,24,.58);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        inset 0 1px rgba(255,255,255,.05),
        0 30px 80px rgba(0,0,0,.28);

}

.open-card::before{

    content:"";

    position:absolute;

    left:0;

    right:0;

    top:0;

    height:100px;

    background:linear-gradient(
        180deg,
        rgba(52,232,154,.06),
        transparent
    );

    pointer-events:none;

}

.open-card:hover{

    transform:translateY(-8px) scale(1.015);

    border-color:rgba(52,232,154,.22);

    box-shadow:
        0 35px 90px rgba(0,0,0,.35),
        0 0 35px rgba(52,232,154,.08);

}

.open-card:hover .open-icon{

    transform:rotate(-6deg) scale(1.08);

    box-shadow:

        0 0 35px rgba(52,232,154,.22);

}



.open-build::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

    radial-gradient(

        circle at 50% 10%,

        rgba(52,232,154,.05),

        transparent 60%

    );

}

/* Stagger cards on desktop */

.open-card:nth-child(2){

    margin-top:40px;

}

.open-card:nth-child(4){

    margin-top:40px;

}


@media(max-width:900px){

.open-grid{

grid-template-columns:1fr;

}

.open-card{

padding:34px;

}

.open-card h3{

font-size:30px;

}

/* Remove stagger on mobile */

    .open-card:nth-child(2),
    .open-card:nth-child(4){

        margin-top:0;

    }

.open-stats{

    grid-template-columns:repeat(2,1fr);

}

.open-stat:nth-child(2){

    border-right:none;

}

.open-stat{

    border-bottom:1px solid rgba(255,255,255,.06);

}

.open-stat:nth-last-child(-n+2){

    border-bottom:none;

}

}


/* =========================================================
   FAQ SECTION
========================================================= */

.faq{

    position:relative;

    padding:170px 0;

}

.faq-list{

    max-width:980px;

    margin:80px auto 0;

    display:flex;

    flex-direction:column;

    gap:22px;

}


/* ==========================================
   OPEN COMMUNITY STATS
========================================== */

.open-stats{

    margin-top:70px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    border-radius:28px;

    overflow:hidden;

}

.open-stat{

    padding:42px 24px;

    text-align:center;

    position:relative;

}

.open-stat:not(:last-child){

    border-right:1px solid rgba(255,255,255,.06);

}

.open-stat h3{

    font-family:Manrope,sans-serif;

    font-size:56px;

    font-weight:800;

    color:var(--mint);

    margin-bottom:10px;

}

.open-stat p{

    color:var(--muted);

    font-size:18px;

}

.open-stats{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.06);

    backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.04),

        0 25px 70px rgba(0,0,0,.30);

}

.open-stat{

    transition:.35s;

}

.open-stat:hover{

    background:rgba(52,232,154,.04);

}

/* FAQ Card */

.faq-item{

    background:rgba(15,18,24,.60);

    border:1px solid rgba(255,255,255,.06);

    border-radius:26px;

    overflow:hidden;

    backdrop-filter:blur(20px);

    -webkit-backdrop-filter:blur(20px);

    box-shadow:

        inset 0 1px rgba(255,255,255,.04),

        0 20px 60px rgba(0,0,0,.28);

    transition:.35s;

}

.faq-item:hover{

    border-color:rgba(52,232,154,.18);

    transform:translateY(-3px);

}

/* Question */

.faq-question{

    width:100%;

    background:none;

    border:none;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:32px 36px;

    cursor:pointer;

    color:white;

    text-align:left;

}

.faq-question span{

    font-family:Manrope,sans-serif;

    font-size:28px;

    font-weight:700;

    line-height:1.3;

}


/* Plus Icon */

.faq-icon{

    width:48px;

    height:48px;

    border-radius:50%;

    border:1px solid rgba(255,255,255,.08);

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    color:var(--mint);

    flex-shrink:0;

    transition:.35s;

}

/* Answer */

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:

        max-height .45s ease,

        padding .35s ease;

    padding:0 36px;

}

.faq-answer p{

    color:var(--muted);

    font-size:18px;

    line-height:1.8;

    padding-bottom:32px;

}

/* Active */

.faq-item.active .faq-answer{

    max-height:500px;

    padding:0 36px;

}

.faq-item.active .faq-icon{

    transform:rotate(45deg);

    background:rgba(52,232,154,.10);

    border-color:rgba(52,232,154,.25);

}

@media(max-width:768px){

.faq{

    padding:120px 0;

}

.faq-question{

    padding:24px;

}

.faq-question span{

    font-size:22px;

}

.faq-answer{

    padding:0 24px;

}

.faq-item.active .faq-answer{

    padding:0 24px;

}

}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    position:relative;

    padding:170px 0 80px;

}

.footer::before{

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    background:

        radial-gradient(

            circle at 50% 0%,

            rgba(52,232,154,.08),

            transparent 55%

        );

}

.footer-top{

    text-align:center;

    max-width:900px;

    margin:auto;

}

.footer-title{

    font-family:Manrope,sans-serif;

    font-size:clamp(54px,6vw,84px);

    font-weight:800;

    line-height:.95;

    margin-bottom:30px;

}

.footer-subtitle{

    max-width:760px;

    margin:0 auto 55px;

    font-size:22px;

    line-height:1.8;

    color:var(--muted);

}

.footer-buttons{

    display:flex;

    justify-content:center;

    gap:22px;

    flex-wrap:wrap;

}

.footer-buttons a{

    transition:

        transform .35s,

        box-shadow .35s;

}

.footer-buttons a:hover{

    transform:translateY(-4px);

}

.footer-divider{

    height:1px;

    margin:120px 0 70px;

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(52,232,154,.30),

            rgba(255,255,255,.10),

            rgba(52,232,154,.30),

            transparent

        );

}

.footer-bottom{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    gap:60px;

    flex-wrap:wrap;

}

.footer-brand{

    max-width:420px;

}

.footer-brand p{

    margin-top:22px;

    color:var(--muted);

    line-height:1.9;

    max-width:360px;

}

.footer-links{

    display:flex;

    gap:42px;

    flex-wrap:wrap;

}

.footer-links a{

    color:var(--muted);

    transition:.3s;

}

.footer-links a{

    position:relative;

    color:var(--muted);

    transition:.3s;

}

.footer-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--mint);

    transition:.3s;

}

.footer-links a:hover{

    color:white;

}

.footer-links a:hover::after{

    width:100%;

}

.footer-copy{

    margin-top:70px;

    padding-top:40px;

    border-top:1px solid rgba(255,255,255,.05);

    color:var(--faint);

    text-align:center;

    font-size:15px;

    letter-spacing:.05em;

}

.footer .logo{

    margin-bottom:10px;

}

.footer .logo span{

    font-size:28px;

    font-weight:800;

}


@media(max-width:900px){

.footer{

    padding:130px 0 60px;

}

.footer-title{

    font-size:52px;

}

.footer-subtitle{

    font-size:18px;

}

.footer-bottom{

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.footer-links{

    justify-content:center;

}

}


#bg-canvas{
    position:fixed;
    inset:0;

    width:100vw;
    height:100vh;

    display:block;

    pointer-events:none;

    z-index:-50;
}

@media(max-width:768px){

.hero-primary,
.hero-secondary{

height:64px;

font-size:18px;

}

}

.footer-logo{

    width:42px;

    height:42px;

    object-fit:contain;

}

.footer-brand .logo{

    display:flex;

    align-items:center;

    gap:14px;

}

.footer-logo{

    filter:
        drop-shadow(0 0 10px rgba(52,232,154,.25));

    transition:.3s;

}

.footer-brand:hover .footer-logo{

    transform:scale(1.06);

    filter:
        drop-shadow(0 0 18px rgba(52,232,154,.45));

}

.footer-copy{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-top:35px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
    color:#8f98a3;
    font-size:.9rem;
}

.footer-legal{
    display:flex;
    gap:24px;
}

.footer-legal a{
    color:#8f98a3;
    text-decoration:none;
    transition:.3s;
}

.footer-legal a:hover{
    color:#6EF4A5;
}


@media (max-width:768px){

    .footer-copy{
        flex-direction:column;
        text-align:center;
    }

    .footer-legal{
        justify-content:center;
        flex-wrap:wrap;
    }

}


@media (max-width:768px){

.hero{

    min-height:auto;
    padding-top:110px;
    padding-bottom:60px;

}

.hero-container{

    display:block;
    padding-bottom:0;
}

.hero-content{

    max-width:100%;
}

}