html{
scroll-behavior:smooth;
}
#getting-started,
#membership,
#experiences,
#privacy{
scroll-margin-top:140px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:Inter,sans-serif;background:#090b18;color:#fff}
.container{width:min(1200px,92%);margin:auto}
.header .container{display:flex;justify-content:space-between;align-items:center;padding:18px 28px;background:rgba(255,255,255,.06);backdrop-filter:blur(20px);border-radius:20px}
.logo{
display:flex;
align-items:center;
}
.logo img{
height:46px;
width:auto;
display:block;
transition:.3s ease;
}
nav{display:flex;gap:36px}
nav a{text-decoration:none;color:#fff;opacity:.85}
.btn{text-decoration:none;background:#6C63FF;color:#fff;padding:15px 26px;border-radius:999px;font-weight:700}
.ghost{background:transparent;border:1px solid rgba(255,255,255,.2)}
.hero{
min-height:100vh;
display:flex;
align-items:center;
padding-top:120px;
background:
radial-gradient(circle at top left,#6C63FF55,transparent 30%),
radial-gradient(circle at bottom right,#7D7AFF55,transparent 30%),
linear-gradient(#090b18,#12182d);padding-top:120px;
}
.hero-grid{
display:grid;
grid-template-columns:58% 42%;gap:80px;align-items:center}
.badge{display:inline-block;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.08);margin-bottom:25px}
h1{font-size:84px;line-height:.95}
h1 span{color:#6C63FF}
.actions{display:flex;gap:18px}
.phone{
display:flex;
justify-content:center;
align-items:center;
margin:auto;
}
.phone img{
width:430px;
max-width:100%;
height:auto;
margin-top:90px;
filter:drop-shadow(0 60px 90px rgba(0,0,0,.45));
transition:.45s ease;
}
.phone img:hover{
transform:
translateY(-12px)
rotate(-2deg)
scale(1.02);
}
/*==========================================
HEADER
==========================================*/
.header{
position:fixed;
top:20px;
left:0;
width:100%;
z-index:9999;
transition:.35s ease;
}
.header .container{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 32px;
border-radius:22px;
background:rgba(255,255,255,.06);
backdrop-filter:blur(22px);
-webkit-backdrop-filter:blur(22px);
transition:.35s ease;
}
.logo img{
display:block;
height:46px;
width:auto;
transition:.35s ease;
}
.header nav{
display:flex;
gap:38px;
}
.header nav a{
color:#fff;
text-decoration:none;
font-weight:500;
transition:color .3s ease;
}
.header .btn{
background:#6C63FF;
color:#fff;
}
/* LIGHT HEADER */
.header.light .container{
background:rgba(255,255,255,.94);
border:1px solid rgba(0,0,0,.06);
box-shadow:0 12px 30px rgba(0,0,0,.08);
}
.header.light nav a{
color:#111827;
}
.header:not(.light) nav a{
color:#ffffff;
}
/* ==========================================
WHY NMOOD
========================================== */
.why{
padding:140px 0;
background:#fff;
color:#111;
}
.section-title p{
width:100%;
max-width:760px;
margin:30px auto 0;
text-align:center;
color:#666;
font-size:20px;
line-height:1.8;
}
.section-title span{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 24px;
border-radius:999px;
background:rgba(108,99,255,.08);
border:1px solid rgba(108,99,255,.15);
color:#6C63FF;
font-size:13px;
font-weight:700;
letter-spacing:2px;
text-transform:uppercase;
}
.section-title h2{
margin-top:18px;
font-size:54px;
line-height:1.15;
color:#111;
font-weight:800;
}
.section-title p{
max-width:760px;
margin:30px auto 0;
font-size:22px;
line-height:1.8;
color:#666;
}
.why-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:70px;
}
.why-card{
background:white;
border-radius:24px;
padding:45px;
box-shadow:0 20px 60px rgba(0,0,0,.08);
transition:.35s;
}
.why-card:hover{
transform:translateY(-10px);
}
.icon{
font-size:42px;
margin-bottom:24px;
}
.why-card h3{
font-size:28px;
margin-bottom:16px;
}
.why-card p{
color:#666;
line-height:1.8;
}
@media(max-width:960px){
.why-grid{
grid-template-columns:1fr;
}
.section-title h2{
font-size:38px;
}
}
/* ==========================================
FEATURES
========================================== */
.features{
padding:140px 0;
background:#f6f8fc;
}
.features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:70px;
}
.feature-card img{
width:100%;
height:220px;
object-fit:cover;
display:block;
}
.feature-card:hover{
transform:translateY(-12px);
}
.feature-icon{
font-size:42px;
margin-bottom:25px;
}
.feature-card h3{
font-size:30px;
font-weight:800;
color:#111;
padding:28px 28px 12px;
min-height:92px;
}
.feature-card p{
padding:0 28px 30px;
color:#666;
font-size:18px;
line-height:1.8;
flex:1;
}
.feature-card{
background:white;
border-radius:26px;
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.08);
transition:.35s;
display:flex;
flex-direction:column;
}
@media(max-width:960px){
.features-grid{
grid-template-columns:1fr;
}
}
.pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 22px;
border-radius:999px;
background:
linear-gradient(
135deg,
rgba(139,92,246,.10),
rgba(59,130,246,.08)
);
border:1px solid rgba(139,92,246,.18);
color:#6C63FF;
font-size:12px;
font-weight:700;
letter-spacing:.25em;
text-transform:uppercase;
width:auto;
max-width:max-content;
margin:0 auto 28px;
white-space:nowrap;
}
p{
margin:28px 0;
font-size:22px;
line-height:1.7;
max-width:620px;
color:#d5d9f5;
}
.section-title{
width:100%;
max-width:900px;
margin:0 auto 70px;
text-align:center;
}
/* ==========================================
HOW IT WORKS
========================================== */
.how{
padding:0px 0;
background:#ffffff;
}
.steps{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
margin-top:70px;
}
.step{
text-align:center;
padding:40px;
}
.step-number{
width:90px;
height:90px;
margin:auto;
border-radius:50%;
background:linear-gradient(135deg,#6C63FF,#8A84FF);
color:white;
display:flex;
justify-content:center;
align-items:center;
font-size:34px;
font-weight:800;
margin-bottom:30px;
}
.step h3{
font-size:30px;
color:#111;
margin-bottom:18px;
}
.step p{
max-width:none;
color:#666;
margin:0;
}
@media(max-width:960px){
.steps{
grid-template-columns:1fr;
}
}
/*==========================================
SHOWCASE
==========================================*/
.showcase{
padding:160px 0;
background:#F8F9FC;
}
.showcase-grid{
display:grid;
grid-template-columns: 48% 52%;
align-items:center;
gap:80px;
}
.showcase-text h2{
color:#111;
font-size:58px;
margin:25px 0;
line-height:1.1;
}
.showcase-text p{
color:#666;
font-size:21px;
line-height:1.9;
margin:0;
max-width:620px;
}
.showcase-image{
position:relative;
}
.showcase-image img{
width:100%;
max-width:500px;
display:block;
margin:auto;
border-radius:28px;
box-shadow:
0 45px 90px rgba(0,0,0,.25);
}
.showcase-image::before{
content:"";
position:absolute;
width:480px;
height:480px;
left:50%;
top:50%;
transform:translate(-50%,-50%);
background:
radial-gradient(
rgba(124,58,237,.28),
transparent 70%
);
filter:blur(90px);
z-index:-1;
}
.showcase-image img:hover{
transform:
rotate(0deg)
scale(1.02);
}
.mood-image img{
aspect-ratio:4/5;
object-fit:cover;
}
.reverse{
background:white;
}
.reverse .showcase-grid{
direction:rtl;
}
.reverse .showcase-text{
direction:ltr;
}
.reverse .showcase-image{
direction:ltr;
}
/*==================================================
AI CONCIERGE
==================================================*/
.ai-concierge{
position:relative;
overflow:hidden;
padding:160px 0;
background:
radial-gradient(circle at center,#6C63FF22 0%,transparent 35%),
radial-gradient(circle at top,#2a1768 0%,transparent 55%),
linear-gradient(180deg,#090515,#130a2d);
}
.ai-header{
max-width:900px;
margin:0 auto 90px;
text-align:center;
}
.ai-header h2{
font-size:68px;
line-height:1.08;
margin:24px 0;
font-weight:800;
}
.ai-header p{
max-width:760px;
margin:auto;
}
.ai-stage{
position:relative;
width:100%;
height:760px;
}
.ai-card{
position:absolute;
width:360px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
border-radius:28px;
overflow:hidden;
backdrop-filter:blur(24px);
-webkit-backdrop-filter:blur(24px);
box-shadow:0 25px 60px rgba(0,0,0,.28);
transition:
transform .35s ease,
box-shadow .35s ease;
animation:cardFloat 7s ease-in-out infinite;
z-index:5;
}
.ai-card:hover{
transform:translateY(-10px);
box-shadow:0 35px 80px rgba(108,99,255,.22);
}
.ai-image{
width:100%;
height:180px;
overflow:hidden;
}
.ai-image img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.ai-info{
padding:24px;
}
.ai-info h3{
font-size:24px;
margin-bottom:8px;
color:#ffffff;
}
.ai-info span{
color:#d6d2f6;
font-size:15px;
}
.ai-card img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}
.card-top{
height:180px;
display:flex;
align-items:center;
justify-content:center;
margin-bottom:30px;
}
.card-top img{
width:220px;
max-width:100%;
}
.card-body{
display:flex;
flex-direction:column;
flex:1;
text-align:center;
}
.membership-list{
list-style:none;
padding:0;
margin:30px 0;
flex:1;
}
.card-info{
padding:22px;
}
.card-info h3{
font-size:27px;
font-weight:700;
margin-bottom:8px;
}
.card-info span{
color:#D6D2F6;
font-size:15px;
}
.ai-left{
left:60px;
top:210px;
}
.ai-right-top{
right:60px;
top:90px;
}
.ai-right-bottom{
right:60px;
top:420px;
}
.ai-card img{
width:100%;
height:180px;
object-fit:cover;
display:block;
}
.card-info{
padding:22px;
}
.card-info h3{
font-size:26px;
margin-bottom:8px;
}
.card-info span{
color:#d6d2f6;
}.ai-center{
position:absolute;
left:50%;
top:330px;
transform:translateX(-50%);
width:360px;
display:flex;
flex-direction:column;
align-items:center;
z-index:20;
}
.ai-glow{
position:absolute;
width:620px;
height:620px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(108,99,255,.55),
transparent 70%);
filter:blur(55px);
z-index:-1;
}
.ai-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
}
.ai-lines path{
fill:none;
stroke:url(#lineGradient);
stroke-width:4;
stroke-linecap:round;
opacity:.9;
}
.ai-orb{
width:260px;
height:260px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at 35% 30%,
#9F8FFF,
#6C63FF 65%,
#4836FF);
animation:
breathe 4s ease-in-out infinite,
floatOrb 7s ease-in-out infinite;
box-shadow:
0 0 60px rgba(108,99,255,.45),
0 0 150px rgba(108,99,255,.28);
overflow:hidden;
}
.ai-orb::before{
content:"";
position:absolute;
inset:-35%;
background:
conic-gradient(
transparent,
rgba(255,255,255,.7),
transparent,
rgba(255,255,255,.15),
transparent
);
animation:spin 10s linear infinite;
}
@keyframes spin{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@keyframes breathe{
0%,100%{
transform:scale(1);
box-shadow:
0 0 60px rgba(108,99,255,.45),
0 0 150px rgba(108,99,255,.25);
}
50%{
transform:scale(1.06);
box-shadow:
0 0 90px rgba(108,99,255,.75),
0 0 230px rgba(108,99,255,.40);
}
}
@keyframes floatOrb{
0%,100%{
translate:0 0;
}
50%{
translate:0 -16px;
}
}
.ai-left{
animation-delay:0s;
}
.ai-right-top{
animation-delay:2s;
}
.ai-right-bottom{
animation-delay:4s;
}
@keyframes cardFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
}
.face{
width:135px;
height:95px;
border-radius:80px;
background:#1a1435;
position:relative;
}
.eye{
width:16px;
height:16px;
background:white;
border-radius:50%;
position:absolute;
top:34px;
animation:blink 5s infinite;
}
@keyframes blink{
0%,94%,100%{
height:16px;
}
95%{
height:2px;
}
97%{
height:16px;
}
}
.eye.left{
left:34px;
}
.eye.right{
right:34px;
}
.mouth{
position:absolute;
width:44px;
height:16px;
left:50%;
transform:translateX(-50%);
bottom:22px;
border-bottom:4px solid white;
border-radius:0 0 40px 40px;
}
.ai-bubble{
transition:.35s;
}
#aiTitle,
#aiText{
transition:.35s;
}
@keyframes bubbleFloat{
0%,100%{
translate:0 0;
}
50%{
translate:0 8px;
}
}
.ai-bubble{
width:360px;
margin-top:35px;
padding:28px;
border-radius:26px;
background:rgba(108,99,255,.22);
border:1px solid rgba(255,255,255,.12);
backdrop-filter:blur(30px);
box-shadow:
0 20px 60px rgba(108,99,255,.22);
text-align:center;
}
.ai-lines path{
stroke-width:3;
stroke-linecap:round;
stroke-dasharray:8 12;
animation:flow 3.5s linear infinite;
}
@keyframes flow{
from{
stroke-dashoffset:180;
}
to{
stroke-dashoffset:0;
}
}
.ai-pill{
display:inline-block;
padding:8px 16px;
border-radius:999px;
background:rgba(255,255,255,.08);
margin-bottom:18px;
font-size:13px;
}
.ai-bubble h3{
font-size:30px;
margin-bottom:12px;
}
.ai-bubble p{
margin:0;
}
/*=====================================
AI SVG LINES
=====================================*/
.ai-lines{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index:2;
}
.ai-line{
fill:none;
stroke:#8E78FF;
stroke-width:2;
stroke-linecap:round;
opacity:.75;
filter:drop-shadow(0 0 10px rgba(142,120,255,.8));
stroke-dasharray:8 10;
animation:lineFlow 3s linear infinite;
}
@keyframes lineFlow{
from{
stroke-dashoffset:0;
}
to{
stroke-dashoffset:-44;
}
}
.ai-message h4,
.ai-message p{
transition:.35s;
}
/*=========================
AI FACE
=========================*/
.ai-face{
position:relative;
width:150px;
height:110px;
border-radius:80px;
background:linear-gradient(180deg,#1f1745,#120d2d);
display:flex;
justify-content:center;
align-items:center;
box-shadow:
inset 0 8px 18px rgba(255,255,255,.08),
0 0 40px rgba(108,99,255,.35);
}
.eye{
position:absolute;
width:18px;
height:18px;
background:white;
border-radius:50%;
top:42px;
animation:blink 5s infinite;
}
.eye.left{
left:42px;
}
.eye.right{
right:42px;
}
.mouth{
position:absolute;
bottom:28px;
width:46px;
height:18px;
border-bottom:5px solid white;
border-radius:0 0 60px 60px;
}
@keyframes blink{
0%{
transform:scaleY(1);
}
47%{
transform:scaleY(1);
}
48%{
transform:scaleY(.08);
}
50%{
transform:scaleY(.08);
}
52%{
transform:scaleY(1);
}
100%{
transform:scaleY(1);
}
}
/*========================================
AI FEATURES
========================================*/
.ai-features{
margin-top:110px;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:28px;
}
.feature{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(24px);
border-radius:30px;
padding:38px;
transition:.35s;
position:relative;
overflow:hidden;
}
.feature:hover{
transform:translateY(-10px);
border-color:#6C63FF;
box-shadow:0 25px 70px rgba(108,99,255,.25);
}
.feature::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(180deg,
rgba(255,255,255,.06),
transparent);
pointer-events:none;
}
.feature-circle{
width:72px;
height:72px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
margin-bottom:28px;
background:rgba(108,99,255,.18);
}
.feature h4{
font-size:34px;
line-height:1.15;
margin-bottom:20px;
}
.feature p{
color:#D6D2F6;
line-height:1.8;
font-size:17px;
}
/*=========================================
CIRCLES
=========================================*/
.circles{
padding:10px 0;
background:#ffffff;
}
.circles-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:80px;
}
.circles-content h2{
color:#111;
font-size:58px;
line-height:1.1;
margin:24px 0;
}
.circles-content p{
color:#666;
font-size:21px;
line-height:1.8;
max-width:600px;
}
.circles-visual{
display:flex;
justify-content:center;
align-items:center;
}
.circles-phone{
width:360px;
max-width:100%;
filter:drop-shadow(0 40px 70px rgba(0,0,0,.18));
transition:transform .35s ease;
}
.circles-phone:hover{
transform:translateY(-10px);
}
.circles-visual{
position:relative;
display:flex;
justify-content:center;
align-items:center;
}
.circles-rings{
position:absolute;
inset:0;
display:flex;
justify-content:center;
align-items:center;
pointer-events:none;
}
.ring{
position:absolute;
border-radius:50%;
border:2px dotted rgba(108,99,255,.14);
animation:rotateRing 80s linear infinite;
}
.ring1{
width:300px;
height:300px;
}
.ring2{
width:420px;
height:420px;
animation-direction:reverse;
}
.ring3{
width:540px;
height:540px;
}@keyframes rotateRing{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
.circles-glow{
position:absolute;
width:520px;
height:520px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(108,99,255,.20),
transparent 72%);
filter:blur(45px);
z-index:0;
}
.circles-phone{
position:relative;
z-index:2;
}.interest-orb{
position:absolute;
width:74px;
height:74px;
border-radius:50%;
background:rgba(255,255,255,.82);
backdrop-filter:blur(18px);
border:1px solid rgba(255,255,255,.95);
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
box-shadow:
0 12px 35px rgba(0,0,0,.08);
z-index:3;
animation:orbFloat 7s ease-in-out infinite;
}
.interest-orb span{
font-size:26px;
}
.interest-orb small{
margin-top:4px;
font-size:10px;
font-weight:700;
color:#555;
}.orb1{
top:80px;
left:170px;
}
.orb2{
top:170px;
right:60px;
}
.orb3{
bottom:120px;
left:60px;
}
.orb4{
bottom:170px;
right:80px;
}
.orb5{
top:10px;
right:180px;
}
.orb6{
top:250px;
left:20px;
}@keyframes orbFloat{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-10px);
}
100%{
transform:translateY(0);
}
}.orb2{ animation-delay:1s; }
.orb3{ animation-delay:2s; }
.orb4{ animation-delay:3s; }
.orb5{ animation-delay:4s; }
.orb6{ animation-delay:5s; }
/*=========================================
LIFE SECTION
=========================================*/
.life-section{
position:relative;
overflow:hidden;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:
radial-gradient(circle at top,
rgba(108,99,255,.18),
transparent 40%),
linear-gradient(
180deg,
#090b18,
#121428,
#090b18);
}.life-bg{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 30%,
rgba(108,99,255,.12),
transparent 30%),
radial-gradient(circle at 80% 70%,
rgba(108,99,255,.08),
transparent 35%);
filter:blur(40px);
animation:bgMove 18s ease-in-out infinite;
}
.life-content{
position:relative;
z-index:2;
text-align:center;
max-width:1100px;
margin:auto;
}
.life-content h2{
padding-top: 70px;
font-size:clamp(64px,7vw,96px);
line-height:.95;
letter-spacing:-3px;
font-weight:900;
margin-bottom:40px;
}.life-content p{
margin:0 auto 40px;
color:#d7daf7;
font-size:28px;
line-height:1.7;
max-width:760px;
}.life-cloud{
margin:80px auto;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:22px;
max-width:900px;
}.life-cloud span{
padding:16px 28px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(18px);
font-size:18px;
transition:.35s;
animation:floatLife 8s ease-in-out infinite;
animation-delay:var(--delay);
}
.life-cloud span:nth-child(1){--delay:0s;}
.life-cloud span:nth-child(2){--delay:.8s;}
.life-cloud span:nth-child(3){--delay:1.6s;}
.life-cloud span:nth-child(4){--delay:2.4s;}
.life-cloud span:nth-child(5){--delay:3.2s;}
.life-cloud span:nth-child(6){--delay:4s;}
.life-cloud span:nth-child(7){--delay:4.8s;}
.life-cloud span:nth-child(8){--delay:5.6s;}
.life-cloud span:nth-child(9){--delay:6.4s;}
.life-cloud span:nth-child(10){--delay:7.2s;}
.life-cloud span:nth-child(11){--delay:1.2s;}
.life-cloud span:nth-child(12){--delay:2.8s;}
.life-btn{
display:inline-flex;
align-items:center;
gap:14px;
padding:22px 42px;
border-radius:999px;
background:linear-gradient(135deg,#6C63FF,#8A84FF);
color:#fff;
text-decoration:none;
font-weight:700;
font-size:20px;
box-shadow:
0 20px 50px rgba(108,99,255,.35);
transition:.35s;
}
.life-btn:hover{
transform:translateY(-8px);
box-shadow:
0 35px 90px rgba(108,99,255,.45);
}
@keyframes floatLife{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
100%{
transform:translateY(0);
}
}@keyframes bgMove{
0%{
transform:translateX(0);
}
50%{
transform:translateX(-30px);
}
100%{
transform:translateX(0);
}
}
.life-noise{
position:absolute;
inset:0;
opacity:.04;
background-image:
radial-gradient(circle,
rgba(255,255,255,.7) 1px,
transparent 1px);
background-size:36px 36px;
pointer-events:none;
}
/*=========================================
MEMBERSHIP
=========================================*/
.membership{
padding:40px 0;
background:#fff;
}
.membership-header{
text-align:center;
max-width:980px;
margin:0 auto;
}
.membership-header h2{
margin:32px auto 26px;
font-size:clamp(60px,6vw,62px);
line-height:.95;
font-weight:800;
letter-spacing:-0.04em;
max-width:900px;
color:#000;
}
/*==================================================
MEMBERSHIP HEADER
==================================================*/
.membership-header{
max-width:760px;
margin:0 auto 70px;
text-align:center;
padding:0 20px;
}
.membership-label{
display:block;
font-size:13px;
letter-spacing:.35em;
text-transform:uppercase;
color:#8c8c8c;
font-weight:600;
margin-bottom:18px;
}
.membership-small{
font-size:18px;
color:#b6b6b6;
font-weight:400;
line-height:1.7;
margin-bottom:24px;
}
.membership-title{
color:#111827;
background:none;
-webkit-background-clip:initial;
-webkit-text-fill-color:initial;
}
.membership-description{
max-width:620px;
margin:auto;
font-size:19px;
line-height:1.8;
color:#bdbdbd;
}
.membership-grid{
display:grid;
grid-template-columns:repeat(2,minmax(380px,460px));
justify-content:center;
gap:50px;
margin-top:90px;
}
.member-card{
overflow:hidden;
position:relative;
background:#fff;
border-radius:30px;
padding:38px;
min-height:560px;
box-shadow:
0 25px 60px rgba(0,0,0,.08);
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
transition:.35s;
overflow:hidden;
}
.member-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:180px;
background:
radial-gradient(circle at top,
rgba(108,99,255,.10),
transparent 70%);
pointer-events:none;
}
.member-card h3{
font-size:42px;
font-weight:700;
margin:20px 0 14px;
color:#111;
}
.member-card p{
max-width:290px;
font-size:19px;
line-height:1.7;
color:#666;
margin-bottom:35px;
}
.member-card ul{
list-style:none;
padding:0;
margin:0 0 40px;
width:100%;
}
.member-card li{
padding:11px 0;
font-size:18px;
color:#333;
}
.member-card a{
width:100%;
height:60px;
display:flex;
align-items:center;
justify-content:center;
border-radius:18px;
text-decoration:none;
font-size:20px;
font-weight:700;
margin-top:auto;
}
.member-card:not(.premium-card) a{
background:#111;
color:#fff;
transition:.3s;
}
.member-card:not(.premium-card) a:hover{
background:#222;
}
.premium-card a{
background:
linear-gradient(
135deg,
#6C63FF,
#8877FF);
color:#fff;
box-shadow:
0 18px 40px rgba(108,99,255,.28);
}
.premium-card a:hover{
transform:translateY(-2px);
box-shadow:
0 30px 60px rgba(108,99,255,.35);
}
.premium-card{
background:
linear-gradient(
180deg,
white,
#F7F5FF
);
border:1px solid rgba(108,99,255,.18);
}
.member-card:hover{
transform:translateY(-8px);
box-shadow:
0 45px 90px rgba(0,0,0,.12);
}
.premium-card:hover{
border-color:#7C6BFF;
box-shadow:
0 55px 110px rgba(108,99,255,.20);
}
.premium-card::before{
background:
radial-gradient(circle at top,
rgba(108,99,255,.20),
transparent 70%);
}
.member-image{
position:relative;
width:100%;
height:200px;
display:flex;
justify-content:center;
align-items:center;
margin-bottom:28px;
}
.member-image img{
width:250px;
position:relative;
z-index:2;
filter:
drop-shadow(0 20px 40px rgba(0,0,0,.12));
transition:.45s;
}
.member-glow{
position:absolute;
width:220px;
height:220px;
border-radius:50%;
background:
radial-gradient(
rgba(108,99,255,.18),
transparent 70%
);
filter:blur(30px);
z-index:0;
}
.premium-card .member-glow{
background:
radial-gradient(
rgba(108,99,255,.32),
transparent 70%
);
}
.premium-pill{
position:absolute;
top:22px;
right:22px;
padding:8px 16px;
border-radius:999px;
background:rgba(108,99,255,.10);
color:#6C63FF;
font-size:13px;
font-weight:700;
letter-spacing:.5px;
border:1px solid rgba(108,99,255,.18);
}.member-divider{
width:70px;
height:2px;
margin:8px auto 24px;
background:
linear-gradient(
90deg,
transparent,
#6C63FF,
transparent
);
}
.member-card li{
display:flex;
align-items:center;
gap:12px;
padding:10px 0;
font-size:17px;
color:#333;
}
.member-card li span{
color:#6C63FF;
font-weight:700;
font-size:18px;
}
.member-image::before{
content:"";
position:absolute;
width:180px;
height:180px;
border-radius:50%;
background:
radial-gradient(
rgba(108,99,255,.18),
transparent 70%
);
filter:blur(25px);
z-index:0;
}
.member-card:hover .member-image img{
transform:
translateY(-8px)
scale(1.04);
}
.member-image img{
transition:
transform .45s ease;
}
.member-card::after{
content:"";
position:absolute;
top:-100%;
left:-120%;
width:90px;
height:220%;
background:
linear-gradient(
rgba(255,255,255,0),
rgba(255,255,255,.35),
rgba(255,255,255,0)
);
transform:rotate(25deg);
transition:.8s;
}
.member-card:hover::after{
left:130%;
}
html{
overflow-x:hidden;
scroll-behavior:smooth;
}
body{
overflow-x:hidden;
}
.membership{
position:relative;
overflow:hidden;
}
.membership-bg{
position:absolute;
left:50%;
top:55%;
transform:translate(-50%,-50%);
width:900px;
height:500px;
background:
radial-gradient(
rgba(108,99,255,.08),
transparent 70%
);
filter:blur(40px);
pointer-events:none;
}
.card-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:8px 16px;
border-radius:999px;
font-size:12px;
font-weight:700;
letter-spacing:.12em;
margin-bottom:20px;
}
.card-badge.free{
background:#F6F7FC;
color:#6C63FF;
}
.pricing-card:hover{
transform:translateY(-8px);
border-color:rgba(139,92,246,.45);
box-shadow:
0 25px 60px rgba(139,92,246,.18);
}
.membership-card .btn{
transition:
transform .25s ease,
box-shadow .25s ease;
}
.membership-card:hover .btn{
transform:scale(1.03);
box-shadow:
0 10px 30px rgba(139,92,246,.25);
}
/*==================================================
COMMUNITY STORIES
==================================================*/
.stories-section{
padding:140px 20px;
background:
linear-gradient(
180deg,
#F8FAFF 0%,
#EEF3FF 100%);
}
.stories-container{
max-width:1250px;
margin:auto;
text-align:center;
}
.stories-label{
display:block;
font-size:13px;
letter-spacing:.35em;
text-transform:uppercase;
color:#8b8b8b;
margin-bottom:18px;
font-weight:600;
}
.stories-small{
color:#6b7280;
font-size:18px;
margin-bottom:18px;
}
.stories-title{
font-size:72px;
line-height:1.08;
color:#101828;
font-weight:800;
margin-bottom:40px;
}
.stories-description{
max-width:700px;
margin:auto;
color:#667085;
font-size:20px;
line-height:1.8;
margin-bottom:40px;
}
.stories-rating{
display:inline-flex;
align-items:center;
gap:15px;
margin-bottom:70px;
color:#F6B100;
font-size:22px;
font-weight:700;
}
.stories-rating span{
color:#667085;
font-size:16px;
font-weight:500;
}
.stories-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
}
.story-card{
background:white;
border-radius:28px;
padding:38px;
box-shadow:
0 20px 60px rgba(0,0,0,.08);
transition:.35s;
}
.story-stars{
color:#F6B100;
font-size:20px;
margin-bottom:25px;
}
.story-card p{
color:#344054;
font-size:18px;
line-height:1.9;
margin-bottom:35px;
}
.story-author{
display:flex;
align-items:center;
gap:18px;
margin-top:30px;
}
.story-photo{
width:68px;
height:68px;
border-radius:50%;
object-fit:cover;
border:3px solid #ffffff;
box-shadow:0 12px 30px rgba(0,0,0,.15);
flex-shrink:0;
transition:.35s;
}
.story-card:hover .story-photo{
transform:scale(1.08);
}
.story-person strong{
display:block;
font-size:18px;
font-weight:700;
color:#101828;
margin-bottom:4px;
}
.story-person span{
display:block;
font-size:15px;
color:#667085;
margin-bottom:10px;
}
.verified-member{
display:inline-flex;
align-items:center;
padding:6px 12px;
border-radius:999px;
background:#EEF4FF;
color:#2563EB;
font-size:12px;
font-weight:600;
}
.story-card:hover .story-photo{
transform:scale(1.08);
}
.story-person strong{
display:block;
font-size:18px;
color:#111827;
margin-bottom:6px;
}
.story-person span{
display:block;
font-size:15px;
color:#6B7280;
margin-bottom:10px;
}
.story-avatar{
width:64px;
height:52px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(
135deg,
#8B5CF6,
#3B82F6);
color:white;
font-weight:700;
font-size:22px;
}
.story-author strong{
display:block;
color:#101828;
}
.story-author span{
color:#667085;
font-size:14px;
}
@media (max-width:992px){
.stories-grid{
grid-template-columns:1fr;
}
.story-card{
max-width:550px;
margin:auto;
}
}
.stories-title{
font-size:42px;
}
.stories-description{
font-size:18px;
}
.stories-rating{
display:flex;
flex-direction:column;
}
}
.story-card{
transition:
transform .35s cubic-bezier(.22,.61,.36,1),
box-shadow .35s ease;
}
.story-card:hover{
transform:
translateY(-10px)
scale(1.02);
box-shadow:
0 35px 90px rgba(40,40,60,.16);
}
.stories-section{
position:relative;
overflow:hidden;
}
.stories-section::before{
content:"";
position:absolute;
top:-250px;
right:-150px;
width:700px;
height:700px;
background:
radial-gradient(
circle,
rgba(139,92,246,.12),
transparent 70%
);
filter:blur(120px);
}
.stories-section::after{
content:"";
position:absolute;
bottom:-250px;
left:-150px;
width:650px;
height:650px;
background:
radial-gradient(
circle,
rgba(59,130,246,.10),
transparent 70%
);
filter:blur(120px);
}
.section-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:10px 22px;
border-radius:999px;
background:linear-gradient(
135deg,
rgba(139,92,246,.08),
rgba(59,130,246,.06)
);
border:1px solid rgba(139,92,246,.18);
color:#5B5FEF;
font-size:12px;
font-weight:700;
letter-spacing:.25em;
text-transform:uppercase;
width:auto;
max-width:max-content;
margin:0 auto 28px;
white-space:nowrap;
backdrop-filter:blur(12px);
box-shadow:
0 8px 25px rgba(139,92,246,.08);
}
/*==================================================
FAQ HERO
==================================================*/
.faq-hero{
position:relative;
overflow:hidden;
padding:180px 20px 140px;
background:linear-gradient(
180deg,
#0B0D18,
#15182B);
}
.faq-content{
max-width:900px;
margin:auto;
text-align:center;
}
.faq-content h1{
font-size:clamp(64px,8vw,108px);
line-height:.95;
letter-spacing:-3px;
color:#fff;
margin:35px 0;
}
.faq-content p{
max-width:700px;
margin:auto;
font-size:22px;
line-height:1.8;
color:#B8C2E3;
}
.faq-search{
margin:70px auto 0;
width:100%;
max-width:720px;
display:flex;
align-items:center;
gap:18px;
padding:22px 30px;
border-radius:100px;
background:rgba(255,255,255,.06);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(18px);
}
.faq-search svg{
color:#8B5CF6;
flex-shrink:0;
}
.faq-search input{
flex:1;
border:none;
outline:none;
background:none;
color:white;
font-size:18px;
}
.faq-search input::placeholder{
color:#9EA8C8;
}
.faq-glow{
position:absolute;
width:520px;
height:520px;
border-radius:50%;
filter:blur(130px);
opacity:.35;
}
.glow-left{
left:-180px;
top:0;
background:#7C3AED;
}
.glow-right{
right:-180px;
bottom:-120px;
background:#3B82F6;
}
/*==================================================
FAQ CATEGORY CARDS
==================================================*/
.faq-categories{
padding:90px 20px 40px;
background:#F8FAFF;
}
.faq-category-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:30px;
}
.faq-category-card{
background:#fff;
border-radius:28px;
padding:40px 35px;
text-decoration:none;
box-shadow:
0 20px 50px rgba(0,0,0,.06);
transition:.35s;
color:inherit;
border:1px solid rgba(0,0,0,.04);
}
.faq-category-card:hover{
transform:translateY(-10px);
border-color:rgba(139,92,246,.25);
box-shadow:
0 35px 80px rgba(139,92,246,.12);
}
.faq-category-card:active{
transform:scale(.98);
}.faq-search{
transition:.35s;
}
.faq-search:hover{
border-color:#8B5CF6;
}
.faq-search:focus-within{
border-color:#8B5CF6;
box-shadow:
0 0 0 6px rgba(139,92,246,.08);
}
.faq-category-icon{
width:70px;
height:70px;
border-radius:20px;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
margin-bottom:28px;
background:
linear-gradient(
135deg,
rgba(139,92,246,.12),
rgba(59,130,246,.10)
);
}
.faq-category-card h3{
font-size:28px;
color:#111827;
margin-bottom:16px;
font-weight:700;
}
.faq-category-card p{
margin:0;
max-width:none;
color:#667085;
font-size:17px;
line-height:1.8;
}
@media(max-width:992px){
.faq-category-grid{
grid-template-columns:1fr 1fr;
}
}
@media(max-width:640px){
.faq-category-grid{
grid-template-columns:1fr;
}
}
/*==================================================
FAQ CONTENT
==================================================*/
.faq-section-light{
padding:120px 20px;
background:#ffffff;
}
.faq-heading{
max-width:760px;
margin:0 auto 70px;
text-align:center;
}
.faq-heading h2{
font-size:58px;
color:#111827;
margin:28px 0 22px;
line-height:1.05;
}
.faq-heading p{
max-width:650px;
margin:auto;
color:#667085;
font-size:20px;
line-height:1.8;
}
.faq-list{
max-width:920px;
margin:auto;
}
/*==================================================
FINAL CTA
==================================================*/
.cta-section{
position:relative;
overflow:hidden;
padding:40px 20px;
text-align:center;
background:
radial-gradient(circle at center,
rgba(108,99,255,.18),
transparent 40%),
linear-gradient(
180deg,
#090B18,
#11152A,
#090B18);
}
.cta-glow{
position:absolute;
left:50%;
top:35%;
transform:translateX(-50%);
width:900px;
height:900px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(108,99,255,.20),
transparent 70%);
filter:blur(70px);
pointer-events:none;
}
.cta-title{
font-size:72px;
line-height:1.05;
font-weight:800;
margin:35px 0 30px;
color:white;
}
.cta-description{
max-width:760px;
margin:auto;
font-size:22px;
line-height:1.8;
color:#D6D8EE;
}
.cta-buttons{
display:flex;
justify-content:center;
gap:22px;
margin:60px 0;
flex-wrap:wrap;
}
.store-btn{
display:flex;
align-items:center;
gap:18px;
padding:18px 30px;
border-radius:22px;
text-decoration:none;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
backdrop-filter:blur(18px);
transition:.35s;
color:white;
}
.store-btn:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.12);
box-shadow:
0 25px 60px rgba(108,99,255,.25);
}
.store-btn img{
width:140px;
}
.store-btn small{
display:block;
font-size:12px;
opacity:.75;
}
.store-btn strong{
font-size:20px;
font-weight:700;
}
.cta-phone{
margin:70px 0;
}
.cta-phone img{
width:330px;
max-width:100%;
filter:drop-shadow(0 45px 90px rgba(0,0,0,.45));
animation:floatPhone 6s ease-in-out infinite;
}
@keyframes floatPhone{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-18px);
}
}
.cta-stats{
display:flex;
justify-content:center;
gap:90px;
margin-top:50px;
flex-wrap:wrap;
}
.cta-stats strong{
display:block;
font-size:30px;
color:white;
margin-bottom:10px;
}
.cta-stats span{
color:#C6CBE4;
font-size:17px;
}
@media(max-width:992px){
.cta-title{
font-size:48px;
}
.cta-description{
font-size:18px;
}
.cta-buttons{
flex-direction:column;
align-items:center;
}
.store-btn{
width:320px;
justify-content:center;
}
.cta-stats{
gap:45px;
}
}/*==================================
STORE BADGES
==================================*/
.store-buttons{
display:flex;
gap:18px;
margin-top:40px;
flex-wrap:wrap;
}
.store-badge{
display:inline-block;
transition:.35s ease;
}
.store-badge img{
height:60px;
display:block;
}
.store-badge:hover{
transform:
translateY(-6px)
scale(1.04);
filter:
drop-shadow(0 18px 35px rgba(108,99,255,.30));
}
.hero-content{
display:flex;
flex-direction:column;
justify-content:center;
}
.hero-right{
display:flex;
justify-content:center;
align-items:center;
}
.phone{
display:flex;
justify-content:center;
align-items:center;
}
.phone img{
width:430px;
max-width:100%;
height:auto;
filter:drop-shadow(0 60px 90px rgba(0,0,0,.45));
animation:floatPhone 6s ease-in-out infinite;
}
/*==================================================
FOOTER
==================================================*/
.footer{
position:relative;
overflow:hidden;
padding:110px 20px 70px;
background:
linear-gradient(
180deg,
#090B18,
#05060F);
}
/*==================================================
FOOTER BACKGROUND LOGO
==================================================*/
.footer-bg-logo{
position:absolute;
left:50%;
top:48%;
transform:translate(-50%,-50%);
width:700px;
opacity:.035;
pointer-events:none;
user-select:none;
z-index:1;
}
.footer-bg-logo img{
display:block;
width:100%;
height:auto;
}
.footer-top{
display:grid;
grid-template-columns:
2fr
1fr
1fr
1fr
1fr;
gap:60px;
position:relative;
z-index:5;
}
.footer-logo{
width:170px;
margin-bottom:0px;
}
.footer-brand p{
color:#AEB6D5;
line-height:1.8;
font-size:18px;
margin-top:0;
margin-bottom:0px;
}
.footer-column h4{
color:#ffffff;
margin-bottom:24px;
font-size:18px;
}
.footer-column{
display:flex;
flex-direction:column;
}
.footer-divider{
height:1px;
margin:70px 0 35px;
background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);
}
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:20px;
position:relative;
z-index:2;
}
.footer-bottom p{
color:#8F97B8;
font-size:14px;
margin:0;
}
.footer-bottom span{
color:#8F97B8;
font-size:14px;
}
.footer-column a{
text-decoration:none;
color:#AEB6D5;
margin-bottom:14px;
transition:.3s;
}
.footer-column a:hover{
color:#8B5CF6;
transform:translateX(4px);
}
.social-icons img{
display:block;
margin-top: 10px;
align-items: center;
width:auto;
height:30px;
max-width:30px;
object-fit:contain;
transition:.3s;
}
/*==================================================
COPYRIGHT
==================================================*/
.copyright-bar{
background:#05060F;
border-top:1px solid rgba(255,255,255,.08);
padding:22px 20px;
}
.copyright-content{
display:flex;
justify-content:space-between;
align-items:center;
flex-wrap:wrap;
gap:15px;
font-size:14px;
color:#8B93B5;
}
@media(max-width:992px){
.footer-top{
display:grid;
grid-template-columns:
2.4fr
1fr
1fr
.9fr;
gap:50px;
position:relative;
z-index:2;
}
}
.footer-tagline{
display:block;
margin-top:0px;
color:#8F97B8;
line-height:1.8;
font-size:12px;
max-width:320px;
}
.footer-brand{
margin:auto;
}
.copyright-content{
justify-content:center;
text-align:center;
}
.footer-bg-text{
font-size:120px;
}
}
/*==============================
SCROLL ANIMATION
==============================*/
.fade-up{
opacity:0;
transform:translateY(50px);
transition:
opacity .8s ease,
transform .8s ease;
}
.fade-up.show{
opacity:1;
transform:translateY(0);
}
/*==================================================
UNIVERSAL BUTTON HOVER
==================================================*/
.btn,
.store-btn,
.life-btn,
.member-card a,
.store-badge{
transition:
transform .35s ease,
box-shadow .35s ease,
background-color .35s ease,
border-color .35s ease;
}
.btn:hover,
.store-btn:hover,
.life-btn:hover,
.member-card a:hover,
.store-badge:hover{
transform:
translateY(-6px)
scale(1.03);
box-shadow:
0 25px 60px rgba(108,99,255,.28);
}
/* =====================================
HEADER STATES
===================================== */
.logo-image{
display:block;
width:160px;
height:auto;
transition:opacity .3s ease;
}
/*==================================================
ABOUT PAGE
==================================================*/
.about-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
background:
radial-gradient(circle at top,
rgba(108,99,255,.22),
transparent 35%),
linear-gradient(
180deg,
#090B18,
#121A31);
}
.about-container{
width:min(960px,90%);
padding-top: 150px;
margin:auto;
text-align:center;
position:relative;
z-index:5;
}
.about-badge{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 22px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#8D84FF;
font-size:13px;
font-weight:700;
letter-spacing:.25em;
text-transform:uppercase;
}
.about-title{
margin:40px auto 30px;
max-width:900px;
font-size:clamp(64px,8vw,92px);
line-height:1.02;
font-weight:800;
letter-spacing:-3px;
color:#fff;
}
.about-text{
max-width:760px;
margin:auto;
font-size:24px;
line-height:1.8;
color:#D8DCF7;
}
.about-button{
display:inline-flex;
align-items:center;
justify-content:center;
margin-top:55px;
padding:20px 42px;
border-radius:999px;
text-decoration:none;
background:linear-gradient(
135deg,
#6C63FF,
#8F84FF);
color:white;
font-size:18px;
font-weight:700;
transition:.35s;
}
.about-button:hover{
transform:translateY(-6px);
}
.about-glow{
position:absolute;
width:900px;
height:900px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(108,99,255,.18),
transparent 70%);
filter:blur(90px);
animation:aboutGlowFloat 10s ease-in-out infinite;
}
@keyframes aboutGlowFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-30px);
}
}
/*==================================================
OUR STORY
==================================================*/
.story-section{
position:relative;
padding:180px 20px;
background:#ffffff;
overflow:hidden;
}
.story-grid{
display:grid;
grid-template-columns:55% 45%;
gap:80px;
align-items:center;
}
.story-content{
max-width:650px;
}
.story-pill{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 20px;
border-radius:100px;
background:#F4F0FF;
color:#7C3AED;
font-size:13px;
font-weight:700;
letter-spacing:.15em;
margin-bottom:30px;
}
.story-pill::before{
content:"";
width:8px;
height:8px;
border-radius:50%;
background:#8B5CF6;
}
.story-content h2{
font-size:clamp(56px,5vw,78px);
line-height:1.02;
font-weight:900;
letter-spacing:-2px;
color:#0F172A;
margin-bottom:35px;
}
.story-content h2 span{
display:block;
color:#8B5CF6;
}
.story-intro{
font-size:22px;
line-height:1.9;
color:#64748B;
margin-bottom:60px;
}
.story-points{
display:flex;
flex-direction:column;
gap:24px;
}
.story-row{
display:grid;
grid-template-columns:1fr auto 1fr;
align-items:center;
gap:24px;
padding:22px 0;
border-bottom:1px solid #E8EAF4;
}
.negative{
color:#0F172A;
font-size:20px;
font-weight:600;
}
.arrow{
color:#8B5CF6;
font-size:24px;
}
.positive{
color:#7C3AED;
font-size:20px;
font-weight:700;
}
.story-quote{
margin-top:60px;
padding:35px;
border-radius:24px;
background:white;
border:1px solid #ECECF5;
box-shadow:
0 20px 60px rgba(0,0,0,.05);
}
.story-quote strong{
display:block;
font-size:26px;
color:#111827;
}
.story-quote p{
margin-top:10px;
font-size:18px;
color:#667085;
}
.story-image{
position:relative;
display:flex;
justify-content:center;
}
.story-image{
position:relative;
z-index:1;
}
.story-image::before{
z-index:0;
}
.story-image img{
position:relative;
z-index:1;
}
.story-image img{
width:80%;
max-width:560px;
aspect-ratio:4/5;
object-fit:cover;
border-radius:34px;
box-shadow:
0 45px 90px rgba(0,0,0,.18),
0 0 90px rgba(139,92,246,.18);
animation:storyFloat 7s ease-in-out infinite;
}
@keyframes storyFloat{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-12px);
}
100%{
transform:translateY(0);
}
}
@media(max-width:992px){
.story-grid{
grid-template-columns:1fr;
gap:70px;
}
.story-content{
max-width:100%;
}
.story-content h2{
font-size:54px;
}
.story-intro{
font-size:20px;
}
.story-row{
grid-template-columns:1fr;
text-align:center;
gap:10px;
}
.story-image img{
max-width:480px;
}
}
/*==================================================
ABOUT PRINCIPLES
==================================================*/
.about-principles-section{
padding:0px 0;
background:#F7F9FC;
}
.about-principles-intro{
max-width:760px;
margin:0 auto 90px;
text-align:center;
}
.about-principles-label{
display:inline-flex;
padding:10px 22px;
border-radius:999px;
background:#EEF2FF;
color:#6C63FF;
font-size:13px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
}
.about-principles-heading{
margin:30px 0 24px;
font-size:clamp(46px,5vw,64px);
line-height:1.1;
font-weight:800;
color:#111827;
}
.about-principles-description{
max-width:700px;
margin:0 auto;
font-size:20px;
line-height:1.8;
color:#667085;
}
.about-principles-layout{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:34px;
}
.about-principles-card{
background:#ffffff;
border-radius:28px;
padding:48px;
box-shadow:0 18px 55px rgba(0,0,0,.06);
transition:transform .35s ease,
box-shadow .35s ease;
}
.about-principles-card:hover{
transform:translateY(-10px);
box-shadow:0 28px 70px rgba(0,0,0,.10);
}
.about-principles-number{
font-size:58px;
font-weight:800;
color:#E5E7F4;
margin-bottom:24px;
}
.about-principles-card-title{
margin:0 0 18px;
font-size:30px;
color:#111827;
font-weight:700;
}
.about-principles-card-text{
margin:0;
font-size:18px;
line-height:1.85;
color:#667085;
}
@media(max-width:992px){
.about-principles-layout{
grid-template-columns:1fr;
}
}
/*==================================================
ABOUT VISION
==================================================*/
.about-vision-section{
padding:0px 0;
background:#0E1326;
}
.about-vision-layout{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:90px;
align-items:center;
}
.about-vision-left{
display:flex;
flex-direction:column;
}
.about-vision-label{
display:inline-flex;
align-self:flex-start;
padding:10px 22px;
border-radius:999px;
background:rgba(241, 242, 242, 0.08);
border:1px solid rgba(255,255,255,.10);
color:#9B92FF;
font-size:13px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
}
.about-vision-heading{
margin:34px 0;
font-size:clamp(50px,6vw,72px);
line-height:1.05;
font-weight:800;
color:#ffffff;
}
.about-vision-text{
margin:0 0 28px;
max-width:620px;
font-size:20px;
line-height:1.9;
color:#D4D8EE;
}
.about-vision-right{
display:flex;
justify-content:center;
}
.about-vision-panel{
width:100%;
max-width:470px;
padding:60px;
border-radius:34px;
background:
linear-gradient(
145deg,
rgba(108,99,255,.20),
rgba(255,255,255,.05)
);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
box-shadow:
0 35px 90px rgba(0,0,0,.35);
}
.about-vision-mini{
color:#9B92FF;
font-size:13px;
font-weight:700;
letter-spacing:.20em;
text-transform:uppercase;
margin-bottom:26px;
}
.about-vision-quote{
font-size:42px;
line-height:1.2;
font-weight:800;
color:#ffffff;
}
.about-vision-divider{
width:70px;
height:3px;
margin:34px 0;
border-radius:999px;
background:#6C63FF;
}
.about-vision-panel-text{
margin:0;
color:#D6D9F5;
font-size:18px;
line-height:1.9;
}
@media(max-width:992px){
.about-vision-layout{
grid-template-columns:1fr;
gap:70px;
}
.about-vision-left{
text-align:center;
align-items:center;
}
.about-vision-label{
align-self:center;
}
.about-vision-text{
max-width:100%;
}
}
/*==================================================
ABOUT PURPOSE
==================================================*/
.about-purpose-section{
padding:10px 0;
background:#ffffff;
}
.about-purpose-row{
display:grid;
grid-template-columns:1fr 1fr;
gap:90px;
align-items:center;
}
.about-purpose-image{
display:flex;
justify-content:center;
}
.about-purpose-image img{
width:100%;
max-width:560px;
display:block;
border-radius:36px;
box-shadow:0 40px 90px rgba(0,0,0,.14);
}
.about-purpose-content{
display:flex;
flex-direction:column;
}
.about-purpose-label{
display:inline-flex;
align-self:flex-start;
padding:10px 22px;
border-radius:999px;
background:#EEF2FF;
color:#6C63FF;
font-size:13px;
font-weight:700;
letter-spacing:.20em;
text-transform:uppercase;
}
.about-purpose-title{
margin:34px 0;
font-size:clamp(48px,6vw,70px);
line-height:1.08;
font-weight:800;
color:#111827;
}
.about-purpose-text{
margin:0 0 28px;
font-size:20px;
line-height:1.9;
color:#667085;
}
@media(max-width:992px){
.about-purpose-row{
grid-template-columns:1fr;
gap:70px;
}
.about-purpose-content{
text-align:center;
align-items:center;
}
.about-purpose-label{
align-self:center;
}
}
/*==================================================
ABOUT QUOTE
==================================================*/
.about-quote-section{
padding:10px 0;
background:#0D1326;
text-align:center;
}
.about-quote-mark{
font-size:130px;
color:#6C63FF;
line-height:1;
margin-bottom:30px;
}
.about-quote-title{
max-width:900px;
margin:auto;
font-size:clamp(52px,6vw,82px);
line-height:1.12;
font-weight:800;
color:#ffffff;
}
.about-quote-author{
margin-top:50px;
color:#9EA7C8;
font-size:18px;
letter-spacing:.20em;
text-transform:uppercase;
}
/*==================================================
ABOUT TEAM
==================================================*/
.about-team-section{
padding:10px 0;
background:#F8FAFC;
}
.about-team-header{
max-width:760px;
margin:0 auto 90px;
text-align:center;
}
.about-team-label{
display:inline-flex;
padding:10px 22px;
border-radius:999px;
background:#EEF2FF;
color:#6C63FF;
font-size:13px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
}
.about-team-heading{
margin:30px 0 24px;
font-size:clamp(48px,5vw,68px);
font-weight:800;
color:#111827;
}
.about-team-description{
max-width:700px;
margin:auto;
font-size:20px;
line-height:1.8;
color:#667085;
}
.about-team-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
}
.about-team-card{
background:#ffffff;
border-radius:30px;
overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.08);
transition:.35s;
}
.about-team-card:hover{
transform:translateY(-10px);
box-shadow:0 35px 90px rgba(108,99,255,.16);
}
.about-team-photo{
width:100%;
height:340px;
object-fit:cover;
display:block;
transition:transform .45s ease;
}
.about-team-card:hover .about-team-photo{
transform:scale(1.05);
}
.about-team-content{
padding:36px;
}
.about-team-name{
margin:0;
font-size:30px;
color:#111827;
}
.about-team-role{
display:block;
margin:10px 0 22px;
color:#6C63FF;
font-size:15px;
font-weight:700;
letter-spacing:.08em;
text-transform:uppercase;
}
.about-team-text{
margin:0;
font-size:18px;
line-height:1.9;
color:#667085;
}
@media(max-width:992px){
.about-team-grid{
grid-template-columns:1fr;
}
}
/*==================================================
ABOUT FINAL CTA
==================================================*/
.about-final-section{
padding:20px 0;
background:
radial-gradient(circle at top,
rgba(108,99,255,.18),
transparent 35%),
linear-gradient(
180deg,
#090B18,
#121A31);
}
.about-final-content{
max-width:900px;
margin:auto;
text-align:center;
}
.about-final-label{
display:inline-flex;
padding:12px 24px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.10);
color:#9A91FF;
font-size:13px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
}
.about-final-title{
margin:36px 0 30px;
font-size:clamp(58px,7vw,90px);
line-height:1.02;
font-weight:800;
color:#ffffff;
}
.about-final-text{
max-width:720px;
margin:0 auto;
font-size:22px;
line-height:1.9;
color:#D6DAF4;
}
.about-final-buttons{
display:flex;
justify-content:center;
gap:24px;
margin-top:70px;
flex-wrap:wrap;
}
.about-final-primary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:22px 42px;
border-radius:999px;
background:#6C63FF;
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:700;
transition:.35s;
}
.about-final-primary:hover{
transform:translateY(-6px);
background:#7A72FF;
}
.about-final-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:22px 42px;
border-radius:999px;
border:1px solid rgba(255,255,255,.15);
background:rgba(255,255,255,.05);
backdrop-filter:blur(14px);
color:#ffffff;
text-decoration:none;
font-size:18px;
font-weight:600;
transition:.35s;
}
.about-final-secondary:hover{
transform:translateY(-6px);
background:rgba(255,255,255,.08);
}
@media(max-width:768px){
.about-final-buttons{
flex-direction:column;
align-items:center;
}
.about-final-primary,
.about-final-secondary{
width:300px;
}
}
/*==================================================
VISION HERO
==================================================*/
.vision-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
text-align:center;
padding:120px 0 200px;
}
.vision-content{
.vision-content h1{
font-size:clamp(62px,7vw,92px);
line-height:.95;
margin:42px 0 28px;
color:#fff;
letter-spacing:-3px;
}}
.vision-pill{
display:inline-flex;
align-items:center;
justify-content:center;
padding:12px 26px;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12);
color:#9B92FF;
font-size:13px;
font-weight:700;
letter-spacing:.22em;
text-transform:uppercase;
margin-bottom:18px;
}
.vision-content p{
max-width:760px;
margin:auto;
color:rgba(255,255,255,.72);
font-size:1.25rem;
line-height:1.9;
}
.vision-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-top:55px;
}
.vision-glow{
position:absolute;
width:600px;
height:600px;
border-radius:50%;
filter:blur(140px);
opacity:.22;
}
.glow-left{
left:-220px;
top:-180px;
background:#8b5cf6;
}
.glow-right{
right:-220px;
bottom:-150px;
background:#06b6d4;
}
.vision-scroll{
position:absolute;
left:50%;
bottom:40px;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
z-index:20; /* add this */
}
.vision-scroll span{
color:rgba(255,255,255,.55);
font-size:.8rem;
letter-spacing:3px;
text-transform:uppercase;
}
.scroll-line{
width:2px;
height:70px;
margin-top:15px;
background:linear-gradient(
to bottom,
rgba(255,255,255,.95),
rgba(255,255,255,.25),
transparent
);
animation:scrollDown 1.8s ease-in-out infinite;
}
@keyframes scrollDown{
0%{
transform:translateY(0);
opacity:.2;
}
50%{
transform:translateY(12px);
opacity:1;
}
100%{
transform:translateY(0);
opacity:.2;
}
}@media(max-width:768px){
.vision-content h1{
font-size:2.8rem;
}
.vision-content p{
font-size:1.05rem;
}
.vision-buttons{
display:flex;
justify-content:center;
gap:20px;
margin-top:90px;
}
}
/*==================================================
VISION BUTTONS
==================================================*/
.vision-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:60px;
}
.vision-buttons a{
text-decoration:none;
}
.btn-primary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 42px;
border-radius:50px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
color:#fff;
font-weight:700;
transition:.35s;
box-shadow:0 15px 40px rgba(139,92,246,.35);
}
.btn-primary:hover{
transform:translateY(-5px);
box-shadow:0 20px 55px rgba(139,92,246,.45);
}
.btn-secondary{
display:inline-flex;
align-items:center;
justify-content:center;
padding:18px 42px;
border-radius:50px;
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.05);
backdrop-filter:blur(18px);
color:#fff;
transition:.35s;
}
.btn-secondary:hover{
background:rgba(255,255,255,.1);
transform:translateY(-5px);
}
/*==================================================
THE PROBLEM
==================================================*/
.vision-problem{
padding:90px 0 70px;
}
.problem-grid{
display:grid;
grid-template-columns:1.1fr .9fr;
gap:80px;
align-items:center;
}
.problem-left h2{
font-size:3.2rem;
line-height:1.15;
margin:25px 0 35px;
color:#fff;
}
.problem-left p{
color:rgba(255,255,255,.72);
line-height:1.9;
margin-bottom:22px;
font-size:1.08rem;
}
.problem-right{
display:flex;
flex-direction:column;
gap:28px;
}
.problem-card{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
border-radius:26px;
padding:35px;
transition:.35s;
}
.problem-card:hover{
transform:translateY(-8px);
border-color:rgba(255,255,255,.18);
box-shadow:0 25px 60px rgba(0,0,0,.28);
}
.problem-number{
width:70px;
height:70px;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
font-size:2rem;
margin-bottom:24px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
}
.problem-card h3{
color:#fff;
margin-bottom:15px;
font-size:1.35rem;
}
.problem-card p{
color:rgba(255,255,255,.70);
line-height:1.8;
}
@media(max-width:768px){
.problem-grid{
grid-template-columns:1fr;
gap:60px;
}
.problem-left h2{
font-size:2.3rem;
}
}
/*==================================================
OUR SOLUTION
==================================================*/
.vision-solution{
padding:70px 0 120px;
}
.solution-grid{
margin-top:80px;
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}
.solution-card{
padding:40px;
border-radius:28px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
transition:.35s;
}
.solution-card:hover{
transform:translateY(-10px);
border-color:rgba(255,255,255,.18);
box-shadow:0 25px 60px rgba(0,0,0,.25);
}
.solution-icon{
width:80px;
height:80px;
border-radius:22px;
display:flex;
align-items:center;
justify-content:center;
font-size:2rem;
margin-bottom:25px;
background:linear-gradient(135deg,#8b5cf6,#ec4899);
}
.solution-card h3{
color:#fff;
font-size:1.6rem;
margin-bottom:15px;
}
.solution-card p{
color:rgba(255,255,255,.72);
line-height:1.8;
}
@media(max-width:768px){
.solution-grid{
grid-template-columns:1fr;
}
}
/*==================================================
VISION DIVIDER
==================================================*/
.vision-divider{
display:flex;
justify-content:center;
align-items:center;
margin:15px 0 20px;
}
.vision-divider span{
width:180px;
height:2px;
border-radius:100px;
background:linear-gradient(
90deg,
transparent,
rgba(139,92,246,.9),
rgba(236,72,153,.9),
transparent
);
position:relative;
}
.vision-divider span::after{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:14px;
height:14px;
border-radius:50%;
background:#8b5cf6;
box-shadow:
0 0 15px rgba(139,92,246,.8),
0 0 30px rgba(236,72,153,.6);
}
.vision-problem::after{
content:"";
position:absolute;
left:50%;
bottom:-180px;
transform:translateX(-50%);
width:700px;
height:700px;
border-radius:50%;
background:radial-gradient(
circle,
rgba(139,92,246,.10),
transparent 70%
);
pointer-events:none;
}
/*==================================================
DIGITAL EARTH SECTION
==================================================*/
.digital-earth-section{
position:relative;
padding:160px 0;
overflow:hidden;
}
.digital-earth-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at center,
rgba(123,92,255,.08),
transparent 70%);
pointer-events:none;
}
.digital-earth-section::after{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:900px;
height:900px;
border-radius:50%;
background:
radial-gradient(
circle,
rgba(123,92,255,.10),
transparent 72%
);
filter:blur(120px);
pointer-events:none;
}
.earth-container{
animation:earthFloat 8s ease-in-out infinite;
}
@keyframes earthFloat{
0%{
transform:translate(-50%,-50%);
}
50%{
transform:translate(-50%,-53%);
}
100%{
transform:translate(-50%,-50%);
}
}
.digital-earth-section .section-title{
max-width:760px;
margin:0 auto 100px;
text-align:center;
}
.digital-earth-section .section-title h2{
color:#fff;
font-size:3.6rem;
line-height:1.1;
margin:25px 0;
}
.digital-earth-section .section-title p{
color:rgba(255,255,255,.70);
font-size:1.15rem;
line-height:1.9;
}.earth-wrapper{
position:relative;
width:1200px;
max-width:100%;
height:650px;
margin:auto;
}.earth-container{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:580px;
height:580px;
}.digital-earth{
width:100%;
height:100%;
display:block;
}.earth-card{
position:absolute;
width:180px;
padding:22px;
border-radius:24px;
background:
rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:
1px solid rgba(255,255,255,.08);
transition:.45s;
text-align:center;
z-index:5;
}
.earth-card{
transition:
transform .45s,
box-shadow .45s,
border-color .45s;
}
.earth-card:hover{
transform:
translateY(-12px)
scale(1.04);
border-color:#8B5CF6;
box-shadow:
0 25px 70px rgba(123,92,255,.30);
}.flag{
display:block;
font-size:32px;
margin-bottom:12px;
}
.earth-card h4{
color:#fff;
margin-bottom:8px;
font-size:1.25rem;
}
.earth-card p{
color:rgba(255,255,255,.65);
font-size:.95rem;
}.card-left-top{
left:20px;
top:80px;
}
.card-left-bottom{
left:50px;
bottom:50px;
}
.card-right-top{
right:20px;
top:0px;
}
.card-right-middle{
right:0;
top:270px;
}
.card-right-bottom{
right:50px;
bottom:-120px;
}
.earth-message{
text-align:center;
margin-top:80px;
}.earth-message h3{
color:#fff;
font-size:3rem;
line-height:1.15;
margin-bottom:25px;
}.earth-message p{
color:rgba(255,255,255,.65);
max-width:650px;
margin:auto;
line-height:1.9;
font-size:1.1rem;
}
.region-icon{
width:72px;
height:72px;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 18px;
border-radius:18px;
background:rgba(108,99,255,.08);
border:1px solid rgba(108,99,255,.18);
}
.region-icon img{
width:42px;
height:42px;
object-fit:contain;
filter:brightness(0) invert(1);
opacity:.95;
}
@media(max-width:992px){
.earth-wrapper{
height:auto;
}
.earth-container{
position:relative;
left:auto;
top:auto;
transform:none;
width:100%;
max-width:520px;
margin:0 auto 50px;
}
.earth-card{
.earth-card{
position:relative;
width:100%;
max-width:320px;
min-height:auto;
margin:20px auto;
left:auto;
right:auto;
top:auto;
bottom:auto;
}
left:auto;
right:auto;
top:auto;
bottom:auto;
}
}
/*==================================================
VISION PAGE TYPOGRAPHY FIX
==================================================*/
.vision-solution .section-title h2{
color:#ffffff !important;
}
.vision-solution .section-title p{
color:rgba(255,255,255,.75) !important;
}
/*==================================================
EARTH CARDS
==================================================*/
.earth-card{
position:absolute;
width:230px;
min-height:170px;
padding:30px;
border-radius:28px;
background:linear-gradient(
180deg,
rgba(255,255,255,.07),
rgba(255,255,255,.03)
);
backdrop-filter:blur(30px);
border:1px solid rgba(255,255,255,.10);
box-shadow:
0 20px 60px rgba(0,0,0,.25);
transition:.45s ease;
text-align:center;
z-index:20;
}
.earth-card:hover{
transform:translateY(-12px) scale(1.04);
border-color:#8B5CF6;
box-shadow:
0 25px 70px rgba(123,92,255,.35);
}
/*==================================================
EARTH STYLING
==================================================*/
.earth-sphere{
fill:url(#earthGradient);
filter:drop-shadow(0 0 45px rgba(123,92,255,.45));
}
.earth-overlay{
fill:none;
stroke:rgba(255,255,255,.08);
stroke-width:2;
}
.earth-highlight{
fill:rgba(255,255,255,.18);
filter:blur(20px);
}
.atmosphere{
fill:none;
stroke:rgba(140,110,255,.22);
stroke-width:14;
filter:blur(10px);
}
.earth-glow{
fill:rgba(120,90,255,.15);
filter:blur(65px);
}
.grid{
fill:none;
stroke:rgba(255,255,255,.12);
stroke-width:1.5;
}
.orbit{
fill:none;
stroke:rgba(255,255,255,.10);
stroke-width:2;
}
.orbit1{
animation:orbitOne 26s linear infinite;
transform-origin:center;
}
.orbit2{
animation:orbitTwo 18s linear infinite reverse;
transform-origin:center;
}
.orbit3{
animation:orbitThree 34s linear infinite;
transform-origin:center;
}
.node{
fill:#ffffff;
filter:url(#glow);
animation:nodePulse 3s ease-in-out infinite;
}
.n2{
animation-delay:.5s;
}
.n3{
animation-delay:1s;
}
.n4{
animation-delay:1.5s;
}
.n5{
animation-delay:2s;
}
@keyframes orbitOne{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
@keyframes orbitTwo{
from{
transform:rotate(360deg);
}
to{
transform:rotate(0deg);
}
}
@keyframes orbitThree{
from{
transform:rotate(0deg);
}
to{
transform:rotate(-360deg);
}
}
@keyframes nodePulse{
0%,100%{
opacity:.5;
transform:scale(.8);
}
50%{
opacity:1;
transform:scale(1.9);
}
}
.earth-body{
transform-origin:center;
animation:earthRotate 35s linear infinite;
}
@keyframes earthRotate{
from{
transform:rotate(0deg);
}
to{
transform:rotate(360deg);
}
}
/*=========================
EARTH GLOW
=========================*/
.earth-glow{
fill:rgba(123,92,255,.18);
filter:blur(60px);
}
/*=========================
ORBITS
=========================*/
.orbit{
fill:none;
stroke:rgba(255,255,255,.10);
stroke-width:2;
}
.orbit1{
animation:orbitSpin 22s linear infinite;
}
.orbit2{
animation:orbitSpinReverse 16s linear infinite;
}
.orbit3{
animation:orbitSpin 30s linear infinite;
}
.connection{
stroke:#9B6CFF;
stroke-width:2;
fill:none;
opacity:.35;
stroke-linecap:round;
stroke-dasharray:8;
animation:flow 8s linear infinite;
}
@keyframes flow{
from{
stroke-dashoffset:100;
}
to{
stroke-dashoffset:0;
}
}
/*=========================
GRID
=========================*/
.grid{
fill:none;
stroke:rgba(255,255,255,.08);
stroke-width:1.2;
}
/*=========================
NODES
=========================*/
.node{
fill:#ffffff;
filter:url(#glow);
animation:pulseNode 2.5s infinite;
}
/*=========================
ANIMATIONS
=========================*/
@keyframes orbitSpin{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
@keyframes orbitSpinReverse{
from{transform:rotate(360deg);}
to{transform:rotate(0deg);}
}
@keyframes pulseNode{
0%,100%{
transform:scale(.8);
opacity:.6;
}
50%{
transform:scale(1.7);
opacity:1;
}
}
/*==================================================
OUR PRINCIPLES
==================================================*/
.principles-section{
position:relative;
padding:170px 0;
overflow:hidden;
background:
radial-gradient(circle at center,
rgba(124,87,255,.08),
transparent 60%),
linear-gradient(
180deg,
#0d1020,
#111425);
}.principles-section::before{
content:"";
position:absolute;
width:700px;
height:700px;
left:50%;
top:45%;
transform:translate(-50%,-50%);
border-radius:50%;
background:
radial-gradient(circle,
rgba(140,100,255,.18),
transparent 70%);
filter:blur(90px);
}.principles-grid{
position:relative;
display:grid;
grid-template-columns:
repeat(2,1fr);
gap:35px;
margin-top:90px;
}.principle-card{
position:relative;
padding:45px;
border-radius:32px;
background:
rgba(255,255,255,.05);
backdrop-filter:blur(25px);
border:
1px solid rgba(255,255,255,.08);
transition:.45s;
overflow:hidden;
}.principle-card:hover{
transform:
translateY(-10px);
border-color:#8B5CF6;
box-shadow:
0 30px 80px rgba(123,92,255,.25);
}.principle-card::before{
content:"";
position:absolute;
width:220px;
height:220px;
border-radius:50%;
top:-120px;
right:-100px;
background:
radial-gradient(circle,
rgba(124,87,255,.20),
transparent);
opacity:0;
transition:.45s;
}.principle-card:hover::before{
opacity:1;
}.principle-icon{
font-size:54px;
margin-bottom:25px;
}.principle-card h3{
color:white;
font-size:1.7rem;
margin-bottom:18px;
}
.principle-card p{
color:rgba(255,255,255,.70);
line-height:1.9;
font-size:1.05rem;
}@media(max-width:900px){
.principles-grid{
grid-template-columns:1fr;
}
}/*==================================================
NMOOD ICONS
==================================================*/
.nm-icon{
width:68px;
height:68px;
stroke:#8B5CF6;
stroke-width:2.2;
fill:none;
stroke-linecap:round;
stroke-linejoin:round;
transition:.45s;
}
.principle-card:hover .nm-icon{
transform:scale(1.12) rotate(6deg);
filter:drop-shadow(0 0 15px rgba(139,92,246,.65));
}.principle-icon{
animation:iconFloat 5s ease-in-out infinite;
}
@keyframes iconFloat{
0%,100%{
transform:translateY(0);
}
50%{
transform:translateY(-6px);
}
}/*==================================================
BACKGROUND CONSTELLATION
==================================================*/
.principles-network{
position:absolute;
inset:0;
pointer-events:none;
z-index:1;
opacity:.18;
}
.principles-section .container{
position:relative;
z-index:5;
}
.principles-network svg{
width:100%;
height:100%;
}.network-line{
stroke:#8B5CF6;
stroke-width:1.4;
fill:none;
stroke-dasharray:8;
opacity:.45;
animation:networkFlow 10s linear infinite;
}.network-node{
fill:#ffffff;
filter:drop-shadow(0 0 10px #8B5CF6);
animation:networkPulse 3s ease-in-out infinite;
}
.network-node:nth-child(2){
animation-delay:.5s;
}
.network-node:nth-child(3){
animation-delay:1s;
}
.network-node:nth-child(4){
animation-delay:1.5s;
}
.network-node:nth-child(5){
animation-delay:2s;
}@keyframes networkFlow{
from{
stroke-dashoffset:80;
}
to{
stroke-dashoffset:0;
}
}
@keyframes networkPulse{
0%,100%{
transform:scale(.8);
opacity:.5;
}
50%{
transform:scale(1.6);
opacity:1;
}
}.principles-section .section-title{
position:relative;
z-index:20;
}
.principles-grid{
position:relative;
z-index:20;
}
.principles-section h2{
color:#FFFFFF !important;
}
.principles-section p{
color:rgba(255,255,255,.72) !important;
}
.principles-section .section-tag{
color:#8B5CF6;
}
/*==================================================
FINAL CTA
==================================================*/
.vision-final{
position:relative;
padding:50px 0;
text-align:center;
overflow:hidden;
background:
radial-gradient(circle at center,
rgba(124,87,255,.12),
transparent 65%);
}
.vision-final::before{
content:"";
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
width:700px;
height:700px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(124,87,255,.22),
transparent 70%);
filter:blur(110px);
}.vision-final .container{
position:relative;
z-index:2;
}
.vision-final h2{
color:white;
font-size:4.5rem;
line-height:1.08;
max-width:900px;
margin:35px auto;
}
.vision-final p{
color:rgba(255,255,255,.72);
max-width:760px;
margin:0 auto 55px;
line-height:1.9;
font-size:1.2rem;
}.vision-final-buttons{
display:flex;
justify-content:center;
gap:24px;
flex-wrap:wrap;
}.future-line{
margin:90px auto 0;
width:2px;
height:90px;
background:
linear-gradient(
transparent,
rgba(124,87,255,.8),
transparent
);
animation:futureGlow 2.8s ease-in-out infinite;
}@keyframes futureGlow{
0%,100%{
opacity:.35;
transform:scaleY(.9);
}
50%{
opacity:1;
transform:scaleY(1.2);
}
}/*==================================================
MEMBERSHIP HERO
==================================================*/
.membership-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
overflow:hidden;
padding:150px 0 120px;
background:
radial-gradient(circle at top,
rgba(124,87,255,.15),
transparent 60%),
linear-gradient(
180deg,
#0A0B16,
#101325);
}
.membership-content{
max-width:900px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
.membership-content h1{
color:white;
font-size:5rem;
line-height:1.05;
margin:25px 0;
}
.membership-content p{
width:100%;
max-width:820px;
margin:0 auto 50px;
text-align:center;
color:rgba(255,255,255,.72);
font-size:1.25rem;
line-height:1.9;
}
.membership-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:22px;
flex-wrap:wrap;
margin-top:20px;
}
.membership-hero .vision-scroll{
bottom:0px;
}.membership-glow{
position:absolute;
width:650px;
height:650px;
border-radius:50%;
filter:blur(110px);
background:
radial-gradient(circle,
rgba(123,92,255,.22),
transparent 70%);
}
.glow-left{
left:-200px;
top:-150px;
}
.glow-right{
right:-200px;
bottom:-180px;
}
/*==================================================
JOURNEY
==================================================*/
.journey-section{
padding:50px 0;
position:relative;
}
.journey-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:40px;
margin-top:90px;
}.journey-card{
position:relative;
padding:55px;
border-radius:34px;
background:
rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(22px);
transition:.45s;
overflow:hidden;
}
.journey-section .section-title p{
color:rgba(255,255,255,.72) !important;
max-width:900px;
margin:0 auto;
text-align:center;
font-size:1.2rem;
line-height:1.9;
}
.journey-section .section-title{
max-width:1000px;
margin:0 auto;
text-align:center;
}
.journey-section .section-title h2{
color:#FFFFFF !important;
font-size:4.4rem;
line-height:1.08;
margin:28px auto;
max-width:1000px;
}
.journey-card:hover{
transform:
translateY(-10px);
border-color:#8B5CF6;
box-shadow:
0 30px 90px rgba(123,92,255,.25);
}
.journey-badge{
display:inline-block;
padding:10px 22px;
border-radius:999px;
background:
rgba(139,92,246,.18);
color:#8B5CF6;
font-weight:700;
margin-bottom:25px;
}
.premium-badge{
background:
linear-gradient(
90deg,
#8B5CF6,
#EC4899);
color:white;
}
.journey-card h3{
color:white;
font-size:2rem;
margin-bottom:20px;
}
.journey-card p{
color:rgba(255,255,255,.70);
line-height:1.9;
margin-bottom:35px;
}.journey-card ul{
list-style:none;
padding:0;
margin:0;
}
.journey-card li{
color:white;
padding:14px 0;
border-bottom:1px solid rgba(255,255,255,.06);
}
.premium-glow{
position:absolute;
width:300px;
height:300px;
right:-120px;
top:-120px;
border-radius:50%;
background:
radial-gradient(circle,
rgba(139,92,246,.22),
transparent);
filter:blur(80px);
}@media(max-width:900px){
.journey-grid{
grid-template-columns:1fr;
}
}/*==================================================
COMPARE TABLE
==================================================*/
.plans-section{
padding:50px 0;
position:relative;
}
.plans-table{
margin-top:90px;
display:grid;
grid-template-columns:2fr 1fr 1fr;
border-radius:34px;
overflow:hidden;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
}.plan-header{
padding:35px;
text-align:center;
background:rgba(255,255,255,.05);
}
.plan-header h3{
color:white;
font-size:2rem;
margin-bottom:10px;
}
.plan-header span{
color:#8B5CF6;
font-weight:600;
}.plans-table > div{
padding:24px 28px;
border-bottom:1px solid rgba(255,255,255,.06);
border-right:1px solid rgba(255,255,255,.06);
}
.feature{
color:white;
font-weight:600;
}
.yes{
text-align:center;
color:#ffffff;
font-weight:700;
}
.premium{
color:#8B5CF6;
}
.limit{
text-align:center;
color:#ffcc66;
}
.no{
text-align:center;
color:rgba(255,255,255,.35);
}
.basic{
text-align:center;
color:#cccccc;
}.plans-table > div:hover{
background:rgba(139,92,246,.05);
}.plans-section .section-title{
max-width:1000px;
margin:0 auto;
text-align:center;
}
.plans-section .section-title h2{
color:#FFFFFF !important;
font-size:4.4rem;
line-height:1.08;
margin:28px auto;
max-width:1000px;
}
.plans-section .section-title p{
color:rgba(255,255,255,.72) !important;
max-width:850px;
margin:0 auto;
font-size:1.2rem;
line-height:1.9;
}.explorer-header{
background:
linear-gradient(
180deg,
rgba(255,255,255,.05),
rgba(255,255,255,.02)
);
}.premium-header{
position:relative;
background:
linear-gradient(
180deg,
rgba(139,92,246,.30),
rgba(139,92,246,.08)
);
}/*==================================================
WHY MEMBERS UPGRADE
==================================================*/
.upgrade-section{
padding:170px 0;
position:relative;
}
.upgrade-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
margin-top:90px;
}.upgrade-card{
position:relative;
padding:45px;
border-radius:30px;
background:
rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(25px);
transition:.45s;
}.upgrade-card:hover{
transform:
translateY(-10px);
border-color:#8B5CF6;
box-shadow:
0 25px 80px rgba(123,92,255,.25);
}.upgrade-number{
width:60px;
height:60px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:
linear-gradient(
135deg,
#8B5CF6,
#EC4899);
color:white;
font-weight:700;
margin-bottom:25px;
}.upgrade-card h3{
color:white;
font-size:1.8rem;
margin-bottom:20px;
}
.upgrade-card p{
color:rgba(255,255,255,.72);
line-height:1.9;
}@media(max-width:900px){
.upgrade-grid{
grid-template-columns:1fr;
}
}/*==================================================
WHY MEMBERS UPGRADE TITLE
==================================================*/
.upgrade-section .section-title{
max-width:1000px;
margin:0 auto;
text-align:center;
}
.upgrade-section .section-title h2{
color:#FFFFFF !important;
font-size:4.4rem;
line-height:1.08;
margin:28px auto;
max-width:1000px;
}
.upgrade-section .section-title p{
color:rgba(255,255,255,.72) !important;
max-width:900px;
margin:0 auto;
text-align:center;
font-size:1.2rem;
line-height:1.9;
}
.upgrade-section .section-tag{
color:#8B5CF6;
}/*==================================================
MEMBERSHIP ENDING
==================================================*/
.membership-ending{
position:relative;
padding:0px 0 120px;
text-align:center;
}
.ending-line{
width:2px;
height:90px;
margin:0 auto 60px;
background:
linear-gradient(
transparent,
#8B5CF6,
transparent
);
animation:endingGlow 3s ease-in-out infinite;
}
.membership-ending h2{
color:#fff;
font-size:4rem;
line-height:1.08;
margin-bottom:30px;
}
.membership-ending p{
max-width:720px;
margin:0 auto 45px;
color:rgba(255,255,255,.70);
font-size:1.2rem;
line-height:1.9;
}@keyframes endingGlow{
0%,100%{
opacity:.35;
transform:scaleY(.8);
}
50%{
opacity:1;
transform:scaleY(1.15);
}
}
/*==================================================
NMOOD WORDMARK
==================================================*/
.nm-logo-word{
display:inline-flex;
align-items:center;
gap:2px;
margin-left:6px;
}
.nm-logo-word img{
height:24px;
width:auto;
display:block;
}
.nm-logo-word span{
font-weight:700;
color:#fff;
}/*==================================================
FAQ HERO
==================================================*/
.faq-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding:160px 0 120px;
background:
radial-gradient(circle at top,
rgba(139,92,246,.15),
transparent 65%),
linear-gradient(
180deg,
#090B16,
#111425);
}
.faq-content{
max-width:820px;
margin:auto;
text-align:center;
}
.faq-content h1{
color:white;
font-size:5rem;
line-height:1.05;
margin:5px 0;
}
.faq-content p{
color:rgba(255,255,255,.72);
font-size:1.2rem;
line-height:1.9;
max-width:760px;
margin:0 auto;
}
/*==================================================
FAQ PAGE
==================================================*/
/*------------------------------------
SECTION
------------------------------------*/
.faq-section{
padding:140px 20px;
background:#FFFFFF;
}
/*------------------------------------
HEADING
------------------------------------*/
.faq-heading{
text-align:center;
max-width:760px;
margin:0 auto 80px;
}
.faq-heading .section-pill{
margin-bottom:24px;
}
.faq-heading h2{
font-size:58px;
line-height:1.05;
color:#0F172A;
margin-bottom:24px;
letter-spacing:-2px;
}
.faq-heading p{
font-size:20px;
color:#667085;
line-height:1.8;
}
/*------------------------------------
FAQ LIST
------------------------------------*/
.faq-list{
max-width:960px;
margin:auto;
}
/*------------------------------------
CARD
------------------------------------*/
.faq-item{
margin-bottom:24px;
border-radius:26px;
overflow:hidden;
background:#FFFFFF;
border:1px solid #ECEEF5;
box-shadow:
0 18px 45px rgba(0,0,0,.05);
transition:.35s;
}
.faq-item:hover{
transform:translateY(-4px);
box-shadow:
0 25px 70px rgba(139,92,246,.12);
}
/*------------------------------------
QUESTION
------------------------------------*/
.faq-question{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:34px 36px;
border:none;
background:none;
cursor:pointer;
text-align:left;
}
.faq-question span:first-child{
font-size:22px;
font-weight:700;
color:#111827;
line-height:1.4;
}
.faq-icon{
width:42px;
height:42px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#F5F2FF;
color:#8B5CF6;
font-size:30px;
flex-shrink:0;
transition:.35s;
}
/*------------------------------------
ANSWER
------------------------------------*/
.faq-answer{
max-height:0;
overflow:hidden;
}
.faq-answer p{
padding:0 36px 34px;
font-size:18px;
line-height:1.9;
color:#667085;
}
/*------------------------------------
ACTIVE
------------------------------------*/
.faq-item.active{
border-color:#8B5CF6;
box-shadow:
0 30px 80px rgba(139,92,246,.15);
}
.faq-item.active .faq-answer{
max-height:500px;
}
.faq-item.active .faq-icon{
transform:rotate(45deg);
background:#8B5CF6;
color:#FFFFFF;
}
/*------------------------------------
RESPONSIVE
------------------------------------*/
@media(max-width:992px){
.faq-heading h2{
font-size:46px;
}
.faq-question{
padding:28px;
}
.faq-question span:first-child{
font-size:20px;
}
.faq-answer p{
padding:0 28px 28px;
}
}
@media(max-width:768px){
.faq-heading h2{
font-size:38px;
}
.faq-heading p{
font-size:18px;
}
.faq-question{
padding:24px;
}
.faq-question span:first-child{
font-size:18px;
}
.faq-icon{
width:36px;
height:36px;
font-size:24px;
}
}/*==================================================
FAQ CTA
==================================================*/
.faq-contact{
padding:140px 20px 180px;
background:linear-gradient(
180deg,
#F8FAFF,
#FFFFFF);
}
.faq-contact-card{
max-width:1100px;
margin:auto;
text-align:center;
padding:80px 70px;
border-radius:34px;
background:linear-gradient(
135deg,
#171A2F,
#0F1221);
color:#FFFFFF;
box-shadow:
0 40px 100px rgba(15,18,33,.18);
}
.faq-contact-card h2{
font-size:56px;
line-height:1.05;
margin:28px 0;
}
.faq-contact-card p{
max-width:650px;
margin:0 auto 45px;
font-size:20px;
line-height:1.9;
color:#C7CFDF;
}
/*==================================================
CONTACT HERO
==================================================*/
.contact-hero{
position:relative;
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
padding:160px 0 120px;
background:
radial-gradient(circle at top,
rgba(139,92,246,.15),
transparent 65%),
linear-gradient(
180deg,
#090B16,
#111425);
}
.contact-content{
max-width:820px;
margin:auto;
text-align:center;
}
.contact-content h1{
color:#fff;
font-size:5rem;
line-height:1.05;
margin:25px 0;
}
.contact-content p{
color:rgba(255,255,255,.72);
max-width:760px;
margin:auto;
font-size:1.2rem;
line-height:1.9;
}/*==================================================
CONTACT OPTIONS
==================================================*/
.contact-options{
padding:170px 0;
}
.contact-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:35px;
margin-top:90px;
}
.contact-card{
padding:45px;
text-align:center;
border-radius:30px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
transition:.4s;
}
.contact-card:hover{
transform:
translateY(-10px)
scale(1.02);
border-color:#8B5CF6;
box-shadow:
0 30px 90px rgba(139,92,246,.22);
}
.contact-card h3{
color:white;
margin-bottom:18px;
font-size:1.7rem;
}
.contact-card p{
color:rgba(255,255,255,.70);
margin-bottom:30px;
line-height:1.8;
}
.contact-card a{
color:#8B5CF6;
font-weight:600;
text-decoration:none;
}
.contact-options .section-tag{
display:inline-flex;
align-items:center;
justify-content:center;
padding:14px 34px;
border-radius:999px;
background:rgba(139,92,246,.12);
border:1px solid rgba(139,92,246,.22);
color:#8B5CF6;
font-size:.95rem;
font-weight:700;
letter-spacing:3px;
text-transform:uppercase;
}
.contact-options .section-title{
max-width:1000px;
margin:0 auto;
text-align:center;
}
.contact-options .section-title h2{
color:#FFFFFF !important;
font-size:4.4rem;
line-height:1.08;
margin:30px auto;
max-width:1000px;
}
.contact-options .section-title p{
color:rgba(255,255,255,.72) !important;
max-width:900px;
margin:0 auto;
font-size:1.2rem;
line-height:1.9;
}
/*==================================================
CONTACT DETAILS & FORM
==================================================*/
.contact-connect{
padding:170px 0;
}
.contact-wrapper{
display:grid;
grid-template-columns:420px minmax(0,1fr);
gap:70px;
align-items:start;
}
/* LEFT */
.contact-info{
width:100%;
}
.contact-info h2{
color:#fff;
font-size:3.5rem;
line-height:1.1;
margin:25px 0;
}
.contact-info p{
color:rgba(255,255,255,.72);
line-height:1.9;
margin-bottom:45px;
}
.contact-detail{
display:flex;
align-items:flex-start;
gap:18px;
margin-bottom:32px;
}
.contact-icon{
width:56px;
height:56px;
border-radius:18px;
display:flex;
align-items:center;
justify-content:center;
flex-shrink:0;
font-size:24px;
background:rgba(139,92,246,.10);
border:1px solid rgba(139,92,246,.20);
}
.contact-detail h4{
color:#fff;
margin-bottom:6px;
font-size:18px;
}
.contact-detail span{
color:#AEB6D5;
line-height:1.6;
}
/* RIGHT */
.contact-form-card{
width:100%;
padding:50px;
border-radius:30px;
background:#1B1D2C;
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(25px);
}
.contact-form-card h3{
color:#fff;
margin-bottom:30px;
font-size:2rem;
}
.contact-form-card form{
display:flex;
flex-direction:column;
}
.contact-form-card input,
.contact-form-card select,
.contact-form-card textarea{
width:100%;
padding:18px 22px;
margin-bottom:20px;
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
background:#1B1D2C;
color:#fff;
font-size:16px;
outline:none;
transition:.35s;
}
.contact-form-card input::placeholder,
.contact-form-card textarea::placeholder{
color:#9EA7C7;
}
.contact-form-card select{
color:#9EA7C7;
}
.contact-form-card input:focus,
.contact-form-card select:focus,
.contact-form-card textarea:focus{
border-color:#8B5CF6;
box-shadow:0 0 0 4px rgba(139,92,246,.10);
}
.contact-form-card textarea{
resize:vertical;
min-height:180px;
}
.contact-form-card button{
width:30%;
margin-left: 430px ;
margin-top:10px;
}
/* MOBILE */
@media (max-width:992px){
.contact-wrapper{
grid-template-columns:1fr;
gap:60px;
}
.contact-info{
order:1;
}
.contact-form-card{
order:2;
}
}
.phone-row{
display:grid;
grid-template-columns:180px 1fr;
gap:16px;
margin-bottom:20px;
}
/*==================================================
LEGAL PAGES
==================================================*/
.legal-hero{
padding:180px 20px 100px;
background:linear-gradient(
180deg,
#0F1221,
#171A2F);
text-align:center;
}
.legal-hero .container{
max-width:900px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
}
.legal-title{
font-size:72px;
color:#fff;
font-weight:800;
margin:25px 0 15px;
}
.legal-updated{
color:#9AA4C6;
font-size:18px;
}
.legal-document{
padding:0 20px 120px;
background:#171A2F;
}
.legal-card{
width:100%;
max-width:none;
margin:auto;
padding:70px;
border-radius:32px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(20px);
}
.legal-card h2{
color:#fff;
font-size:34px;
margin:55px 0 20px;
}
.legal-card h2:first-child{
margin-top:0;
}
.legal-card p{
color:#B7BED8;
font-size:18px;
line-height:1.9;
}
.legal-cta{
padding:110px 20px;
text-align:center;
background:#171A2F;
}
.legal-cta h2{
color:#fff;
font-size:48px;
margin-bottom:18px;
}
.legal-cta p{
color:#AEB6D5;
margin-bottom:40px;
font-size:20px;
text-align: center;
}
.legal-cta .container{
max-width:900px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
@media(max-width:768px){
.legal-title{
font-size:48px;
}
.legal-card{
padding:40px;
}
.legal-card h2{
font-size:28px;
}
}
.breadcrumb{
display:flex;
justify-content:center;
gap:10px;
margin-bottom:30px;
font-size:14px;
color:#8F97B8;
}
.breadcrumb a{
color:#8F97B8;
text-decoration:none;
}
.breadcrumb strong{
color:#fff;
}.legal-meta{
margin-top:18x;
font-size:20px;
color:#8F97B8;
}
.legal-intro{
max-width:720px;
margin:35px auto 0;
font-size:20px;
line-height:1.9;
color:#B6BDD5;
}.legal-toc{
max-width:1000px;
margin:40px auto 40px;
padding:35px;
border-radius:24px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
display:grid;
gap:16px;
}
.legal-toc h3{
color:white;
margin-bottom:10px;
font-size:24px;
}
.legal-toc a{
color:#B6BDD5;
text-decoration:none;
transition:.3s;
}
.legal-toc a:hover{
color:#8B5CF6;
padding-left:8px;
}.legal-card h2{
display:flex;
align-items:center;
font-size:30px;
margin:60px 0 20px;
color:white;
}
.legal-card h2 span{
width:44px;
height:44px;
margin-right:18px;
border-radius:50%;
background:rgba(124,58,237,.18);
display:flex;
align-items:center;
justify-content:center;
font-size:16px;
color:#8B5CF6;
font-weight:700;
}.related-policies{
padding:120px 20px;
background:#171A2F;
text-align:center;
}
.related-policies h2{
font-size:30px;
margin-bottom:60px;
color:white;
}
.related-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
max-width:1200px;
margin:auto;
}
.related-grid a{
padding:30px;
border-radius:22px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
color:white;
transition:.35s;
}
.related-grid a:hover{
transform:translateY(-6px);
border-color:#8B5CF6;
box-shadow:0 25px 60px rgba(139,92,246,.20);
}.legal-divider{
width:90px;
height:4px;
margin:30px auto;
border-radius:999px;
background:linear-gradient(
90deg,
#7C3AED,
#A855F7
);
}
.related-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:22px;
margin-top:50px;
}
.related-grid a{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:15px;
padding:35px;
border-radius:24px;
text-decoration:none;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
transition:.35s;
color:white;
font-size:18px;
}
.related-grid a:hover{
transform:translateY(-6px);
border-color:#8B5CF6;
box-shadow:0 30px 70px rgba(139,92,246,.18);
}
.related-grid a{
font-size:16px;
}.legal-layout{
display:grid;
grid-template-columns:280px 1fr;
gap:50px;
max-width:1400px;
margin:auto;
}
.legal-sidebar{
position:relative;
}
.legal-toc{
position:sticky;
top:130px;
}@media(max-width:992px){
.legal-layout{
grid-template-columns:1fr;
}
.legal-sidebar{
display:none;
}
}
.legal-note{
margin:40px 0;
padding:28px 30px;
border-left:4px solid #8B5CF6;
background:rgba(139,92,246,.08);
border-radius:18px;
color:#E4E8F8;
line-height:1.8;
}
/*==================================================
LEGAL CENTER
==================================================*/
.legal-center{
padding:120px 20px;
background:#171A2F;
}
.legal-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:35px;
max-width:1200px;
margin:auto;
}
.legal-box{
padding:45px;
border-radius:30px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
text-decoration:none;
transition:.35s;
}
.legal-box:hover{
transform:translateY(-8px);
border-color:#8B5CF6;
box-shadow:0 35px 80px rgba(139,92,246,.18);
}
.legal-icon{
font-size:46px;
margin-bottom:30px;
}
.legal-box h3{
font-size:30px;
color:white;
margin-bottom:18px;
}
.legal-box p{
color:#B7BED8;
line-height:1.8;
margin-bottom:35px;
}
.legal-box span{
color:#8B5CF6;
font-weight:600;
}
@media(max-width:900px){
.legal-grid{
grid-template-columns:1fr;
}
}.legal-help{
padding:120px 20px;
text-align:center;
background:#171A2F;
}
.legal-help h2{
font-size:48px;
color:white;
margin-bottom:20px;
text-align: center;
}
.legal-help p{
width:100%;
max-width:650px;
margin:0 auto 45px;
color:#B7BED8;
font-size:20px;
line-height:1.8;
text-align:center;
}
.legal-help .btn-primary{
margin:0 auto;
}
.legal-help .container{
max-width:900px;
margin:0 auto;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
}
/*==================================================
404
==================================================*/
.error404{
padding:220px 20px 180px;
background:linear-gradient(
180deg,
#0F1221,
#171A2F);
text-align:center;
position:relative;
overflow:hidden;
}
.error404 .container{
max-width:900px;
margin:auto;
}
.error-logo-circle{
width:140px;
height:140px;
}
.error-logo-circle img{
width:58px;
}
.error-badge{
width:56px;
height:56px;
font-size:18px;
}
.error404 h1{
color:#fff;
font-size:72px;
line-height:1.1;
margin:30px 0;
}
.error404 p{
max-width:640px;
margin:0 auto 50px;
color:#B6BDD5;
font-size:22px;
line-height:1.8;
}
.error-buttons{
display:flex;
justify-content:center;
gap:22px;
flex-wrap:wrap;
}
.error404::before{
content:"";
position:absolute;
width:700px;
height:700px;
left:50%;
top:-220px;
transform:translateX(-50%);
background:
radial-gradient(
rgba(139,92,246,.16),
transparent 70%
);
filter:blur(100px);
}@media(max-width:768px)
{
.error404
}{
padding:170px 20px 120px;
}
.error-brand{
display:flex;
justify-content:center;
margin-bottom:55px;
}
.error-logo-circle{
position:relative;
width:180px;
height:180px;
border-radius:50%;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(
135deg,
#8B5CF6,
#5B21B6);
box-shadow:
0 0 80px rgba(139,92,246,.45),
0 35px 90px rgba(139,92,246,.30);
animation:float404 6s ease-in-out infinite;
}
.error-logo-circle img{
width:78px;
height:auto;
}
.error-badge{
position:absolute;
right:-12px;
bottom:-12px;
width:70px;
height:70px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
background:#ffffff;
color:#171A2F;
font-size:24px;
font-weight:800;
box-shadow:0 15px 40px rgba(0,0,0,.25);
}
.error404 h1{
font-size:48px;
}
.error404 p{
font-size:18px;
}
/*==================================================
FAQ ACCORDION
==================================================*/
.faq-item{
margin-bottom:22px;
border-radius:24px;
overflow:hidden;
background:#FFFFFF;
border:1px solid #ECEEF5;
box-shadow:0 18px 45px rgba(0,0,0,.05);
transition:.35s;
}
.faq-item:hover{
transform:translateY(-3px);
border-color:#8B5CF6;
}
.faq-question{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:30px 34px;
border:none;
background:none;
cursor:pointer;
text-align:left;
}
.faq-question span:first-child{
color:#111827;
font-size:21px;
font-weight:700;
line-height:1.5;
}
.faq-icon{
width:42px;
height:42px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:#F5F3FF;
color:#8B5CF6;
font-size:30px;
transition:.35s;
flex-shrink:0;
}
.faq-answer{
max-height:0;
overflow:hidden;
opacity:0;
transition:
max-height .45s ease,
opacity .35s ease;
}
.faq-answer p{
padding:0 34px 32px;
margin:0;
color:#667085;
font-size:18px;
line-height:1.9;
}
.faq-item.active{
border-color:#8B5CF6;
box-shadow:0 30px 70px rgba(139,92,246,.14);
}
.faq-item.active .faq-answer{
max-height:500px;
opacity:1;
}
.faq-item.active .faq-icon{
transform:rotate(45deg);
background:#8B5CF6;
color:#FFFFFF;
}
/*==================================================
MOBILE WEBSITE FIXES
Desktop remains unchanged
==================================================*/
@media screen and (max-width:768px){
/* ---------------- HEADER ---------------- */
.header{
top:10px !important;
padding:0 !important;
}
.header .container{
width:94% !important;
padding:14px 18px !important;
border-radius:18px !important;
}
.logo img{
height:34px !important;
}
/* Hide Download button on mobile */
.header .btn{
display:none !important;
}
/* Smaller navigation */
.header nav{
gap:14px !important;
}
.header nav a{
font-size:13px !important;
font-weight:600 !important;
}
/* ---------------- HERO ---------------- */
.hero{
min-height:auto !important;
padding-top:140px !important;
padding-bottom:70px !important;
}
.hero-grid{
grid-template-columns:1fr !important;
gap:40px !important;
text-align:center;
}
.hero-content{
order:1;
}
.hero-right{
order:2;
}
.hero h1{
font-size:44px !important;
line-height:1.05 !important;
}
.hero p{
font-size:18px !important;
line-height:1.7 !important;
margin:auto;
}
.phone img{
width:280px !important;
margin-top:20px !important;
}
/* ---------------- SECTION SPACING ---------------- */
section{
padding:90px 0 !important;
}
.section-title h2{
font-size:36px !important;
line-height:1.2 !important;
}
.section-title p{
font-size:18px !important;
}
/* ---------------- GRIDS ---------------- */
.why-grid,
.steps,
.showcase-grid,
.circles-grid,
.membership-grid,
.stories-grid,
.ai-features{
display:grid !important;
grid-template-columns:1fr !important;
gap:28px !important;
}
/* ---------------- SHOWCASE ---------------- */
.showcase-image img,
.circles-phone{
width:280px !important;
max-width:100%;
}
/* ---------------- AI ---------------- */
.ai-stage{
height:auto !important;
}
.ai-left,
.ai-right-top,
.ai-right-bottom,
.ai-center{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
transform:none !important;
margin:25px auto !important;
}
.ai-card,
.ai-bubble{
width:100% !important;
max-width:340px;
}
.ai-orb{
width:170px !important;
height:170px !important;
}
.ai-lines{
display:none !important;
}
/* ---------------- MEMBERSHIP ---------------- */
.membership-grid{
grid-template-columns:1fr !important;
}
.member-card{
min-height:auto !important;
}
/* ---------------- STORIES ---------------- */
.story-card{
padding:28px !important;
}
/* ---------------- FOOTER ---------------- */
.footer-top{
display:grid !important;
grid-template-columns:1fr !important;
gap:40px;
text-align:center;
}
.footer-column{
align-items:center;
}
.footer-brand{
text-align:center;
}
}
/*==================================================
HOME PAGE MOBILE POLISH
==================================================*/
@media (max-width:768px){
/* Hero */
.hero{
padding-top:120px !important;
padding-bottom:50px !important;
}
.hero-content{
max-width:100%;
}
.hero h1{
font-size:42px !important;
line-height:1.05 !important;
letter-spacing:-1px;
}
.hero p{
font-size:18px !important;
max-width:100%;
margin:20px auto 30px;
}
.badge{
font-size:11px !important;
padding:8px 14px !important;
}
.store-buttons{
justify-content:center;
gap:12px;
flex-wrap:wrap;
}
.store-badge img{
height:48px !important;
}
/* Phone */
.phone{
margin-top:20px;
}
.phone img{
width:260px !important;
margin-top:0 !important;
}
/* Why */
.why{
padding:80px 0 !important;
}
.why-card{
padding:30px !important;
}
/* How */
.how{
padding:80px 0 !important;
}
.step{
padding:20px !important;
}
.step-number{
width:70px;
height:70px;
font-size:28px;
}
/* Discover */
.showcase{
padding:80px 0 !important;
}
.showcase-text{
text-align:center;
}
.showcase-text h2{
font-size:34px !important;
}
.showcase-image{
margin-top:20px;
}
/* AI Concierge */
.ai-concierge{
padding:90px 0 !important;
}
.ai-header h2{
font-size:34px !important;
}
.ai-header p{
font-size:17px !important;
}
.ai-orb{
width:150px !important;
height:150px !important;
}
.ai-bubble{
padding:20px !important;
}
.ai-bubble h3{
font-size:22px !important;
}
.ai-features{
margin-top:50px !important;
}
.feature{
padding:24px !important;
}
.feature h4{
font-size:22px !important;
}
/* Circles */
.circles{
padding:80px 0 !important;
}
.circles-content{
text-align:center;
}
.circles-content h2{
font-size:34px !important;
}
.circles-glow,
.circles-rings,
.interest-orb{
display:none !important;
}
/* Less Scrolling */
.life-section{
min-height:auto !important;
padding:90px 0 !important;
}
.life-content h2{
font-size:40px !important;
}
.life-content p{
font-size:18px !important;
}
.life-cloud{
gap:12px !important;
}
.life-cloud span{
padding:10px 18px !important;
font-size:14px !important;
}
/* Membership */
.membership{
padding:90px 0 !important;
}
.membership-header h2{
font-size:36px !important;
}
.member-image img{
width:180px !important;
}
/* Stories */
.stories-section{
padding:90px 0 !important;
}
.stories-title{
font-size:36px !important;
}
.story-photo{
width:56px;
height:56px;
}
/* CTA */
.cta-section{
padding:90px 0 !important;
}
.cta-title{
font-size:38px !important;
}
.cta-phone img{
width:240px !important;
}
.cta-buttons{
flex-direction:column;
align-items:center;
gap:15px;
}
.store-btn{
width:100%;
max-width:300px;
justify-content:center;
}
}/*==================================================
HEADER MOBILE FIX
==================================================*/
@media (max-width:768px){
.header .container{
padding:12px 16px !important;
}
.logo img{
height:30px !important;
}
.header nav{
gap:10px !important;
}
.header nav a{
display:none;
}
.header nav a:first-child{
display:block;
font-size:13px !important;
}
.header .btn{
display:none !important;
}
}/*==================================================
STORE BUTTONS MOBILE
==================================================*/
@media (max-width:768px){
.actions{
display:flex !important;
flex-direction:column !important;
align-items:center !important;
gap:16px !important;
}
.actions a{
width:220px !important;
}
.actions img{
width:100% !important;
height:auto !important;
display:block;
}
}@media (max-width:768px){
.hero-grid{
width:100% !important;
}
.hero-left,
.hero-right{
width:100% !important;
}
}/* Footer Social Icons */
.footer-social img,
.social-icons img,
.footer-icons img{
width:24px !important;
height:24px !important;
object-fit:contain !important;
display:block;
}/*==================================================
MOBILE MENU
==================================================*/
.mobile-toggle,
.mobile-menu{
display:none;
}
@media (max-width:768px){
.desktop-nav,
.desktop-btn{
display:none !important;
}
.mobile-toggle{
display:flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border:none;
border-radius:12px;
background:rgba(255,255,255,.12);
color:#fff;
font-size:24px;
cursor:pointer;
}
.mobile-menu{
position:fixed;
top:82px;
left:16px;
right:16px;
display:none;
flex-direction:column;
background:#14192f;
border-radius:20px;
padding:20px;
z-index:99999;
box-shadow:0 25px 60px rgba(0,0,0,.35);
}
.mobile-menu.open{
display:flex;
}
.mobile-menu a{
color:#fff;
text-decoration:none;
padding:16px 0;
border-bottom:1px solid rgba(255,255,255,.08);
}
.mobile-download{
margin-top:20px;
background:#6C63FF;
border-radius:14px;
text-align:center;
border:none !important;
}
}/*==================================================
DIGITAL EARTH - MOBILE FIX
==================================================*/
@media (max-width:768px){
.earth-wrapper{
width:100% !important;
height:auto !important;
display:flex !important;
flex-direction:column !important;
align-items:center !important;
}
.earth-container{
position:relative !important;
left:auto !important;
top:auto !important;
transform:none !important;
width:240px !important;
height:240px !important;
margin:40px auto !important;
order:1;
}
/* ALL CARDS */
.earth-card{
position:relative !important;
left:auto !important;
right:auto !important;
top:auto !important;
bottom:auto !important;
width:280px !important;
margin:18px auto !important;
}
/* ORDER */
.card-left-top{
order:2;
}
.card-left-bottom{
order:3;
}
.card-right-top{
order:4;
}
.card-right-middle{
order:5;
}
.card-right-bottom{
order:6;
}
}/*==================================================
VISION PAGE MOBILE FIX
==================================================*/
@media (max-width:768px){
.vision-hero{
padding-top:120px !important;
overflow:hidden !important;
}
.vision-hero .container{
width:100% !important;
max-width:100% !important;
padding:0 20px !important;
}
.vision-content{
width:100% !important;
max-width:100% !important;
text-align:center !important;
}
.vision-content h1{
font-size:48px !important;
line-height:1.05 !important;
}
.vision-content p{
max-width:100% !important;
font-size:18px !important;
}
.vision-buttons{
display:flex !important;
flex-direction:column !important;
gap:16px !important;
align-items:center !important;
}
.vision-buttons a{
width:260px !important;
}
}/*==================================================
THANK YOU PAGE
==================================================*/
.thank-you-page{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
background:
radial-gradient(circle at top,#6c4dff22,transparent 45%),
linear-gradient(135deg,#11132b,#090b18);
}
.thank-you-card{
width:100%;
max-width:700px;
padding:70px 50px;
text-align:center;
background:rgba(255,255,255,.05);
backdrop-filter:blur(20px);
border:1px solid rgba(255,255,255,.08);
border-radius:30px;
box-shadow:0 30px 80px rgba(0,0,0,.35);
}
.success-icon{
width:110px;
height:110px;
margin:auto auto 30px;
display:flex;
align-items:center;
justify-content:center;
border-radius:50%;
background:linear-gradient(135deg,#7a5cff,#8f7dff);
color:#fff;
font-size:52px;
font-weight:700;
box-shadow:0 0 45px rgba(122,92,255,.45);
}
.tag{
display:inline-block;
padding:10px 22px;
border-radius:999px;
background:rgba(122,92,255,.15);
color:#8d7cff;
font-size:13px;
font-weight:700;
letter-spacing:2px;
}
.thank-you-card h1{
margin:28px 0 18px;
font-size:56px;
color:#fff;
}
.thank-you-card p{
max-width:520px;
margin:auto;
color:#cfd4f5;
font-size:20px;
line-height:1.8;
}
.thank-buttons{
margin-top:50px;
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}
@media(max-width:768px){
.thank-you-card{
padding:50px 30px;
}
.thank-you-card h1{
font-size:40px;
}
.thank-you-card p{
font-size:17px;
}
}
/*==================================================
FOOTER CREDIT
==================================================*/
.footer-bottom{
display:flex;
justify-content:space-between;
align-items:center;
gap:24px;
flex-wrap:wrap;
}
.footer-bottom-left{
display:flex;
flex-direction:column;
gap:6px;
}
.footer-bottom-left p{
margin:0;
font-size:12px;
line-height:1.5;
color:#9e9f9e;
max-width:none;
}
.footer-bottom-left span{
font-size:14px;
line-height:1.5;
color:rgba(255,255,255,.72);
}
.footer-credit{
display:flex;
align-items:center;
gap:12px;
text-align:right;
}
.footer-credit-logo{
width:44px;
height:auto;
display:block;
object-fit:contain;
border-radius:10px;
flex-shrink:0;
}
.footer-credit span{
font-size:12px;
line-height:1.5;
color:#9e9f9e;
}
.footer-credit strong{
color:#9e9f9e;
font-weight:700;
}
@media (max-width:768px){
.footer-bottom{
flex-direction:column;
align-items:center;
text-align:center;
}
.footer-bottom-left{
align-items:center;
}
.footer-credit{
flex-direction:column;
text-align:center;
gap:10px;
}
.footer-credit-logo{
width:40px;
}
}