*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Segoe UI,sans-serif;
}

html{
scroll-behavior:smooth;
}

body{

background:#111314;
color:white;
overflow-x:hidden;

}

.backgroundGlow{

position:fixed;
width:100%;
height:100%;

background:

radial-gradient(circle at 20% 20%,rgba(0,255,200,.10),transparent 30%),

radial-gradient(circle at 80% 30%,rgba(110,80,255,.10),transparent 35%),

radial-gradient(circle at 50% 90%,rgba(0,150,255,.08),transparent 35%);

z-index:-1;

animation:moveGlow 12s ease-in-out infinite alternate;

}

@keyframes moveGlow{

100%{

transform:translateY(-30px);

}

}

header{

position:fixed;

top:0;

left:0;

width:100%;

display:flex;

justify-content:space-between;

align-items:center;

padding:20px 60px;

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

backdrop-filter:blur(25px);

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

z-index:999;

}

.logo{

font-size:28px;

letter-spacing:6px;

font-weight:700;

color:#7de8ff;

padding:8px 12px;

overflow:hidden;

cursor:default;

transition:color .4s ease,text-shadow .4s ease,letter-spacing .45s cubic-bezier(.34,1.56,.64,1);

position:relative;

}

.logo:hover{

color:#9bbc0f;

text-shadow:0 0 12px rgba(155,188,15,.5),0 0 40px rgba(155,188,15,.15);

letter-spacing:8px;

background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(155,188,15,.04) 1px,rgba(155,188,15,.04) 2px);

}

.logo::before{

content:"";

position:absolute;

inset:-6px -8px;

border:2px solid transparent;

transition:border-color .45s ease,box-shadow .45s ease;

pointer-events:none;

background:linear-gradient(110deg,transparent 30%,rgba(155,188,15,.06) 50%,transparent 70%);

background-size:250% 100%;

background-position:250% 0;

}

.logo:hover::before{

border-color:#9bbc0f;

box-shadow:0 0 0 2px #306230,0 0 18px rgba(155,188,15,.2);

background-position:-250% 0;

transition:border-color .45s ease,box-shadow .45s ease,background-position .7s cubic-bezier(.4,0,.2,1);

}

.logo::after{

content:"";

position:absolute;

bottom:-3px;
left:-2px;

width:calc(100% + 4px);
height:2px;

background:

linear-gradient(
90deg,
transparent,
#9bbc0f,
transparent);

transform:translateX(-120%);

transition:transform .7s cubic-bezier(.4,0,.2,1);

}

.logo:hover::after{

transform:translateX(120%);

}

nav{

display:flex;

gap:35px;

}

nav a{

text-decoration:none;

color:#ccc;

padding:8px 12px;

overflow:hidden;

letter-spacing:0;

transition:color .4s ease,text-shadow .4s ease,letter-spacing .45s cubic-bezier(.34,1.56,.64,1);

}

nav a:hover{

color:#9bbc0f;

text-shadow:0 0 12px rgba(155,188,15,.5),0 0 40px rgba(155,188,15,.15);

letter-spacing:2px;

background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(155,188,15,.04) 1px,rgba(155,188,15,.04) 2px);

}

section{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:120px 10%;

}

.hero{

text-align:center;

}

.hero h1{

font-size:72px;

margin-bottom:25px;

background:linear-gradient(90deg,#ffffff,#6ee7ff,#8d8bff);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

/* ================================
        HEADING SHIMMER
=============================== */

h2, h3{

background:linear-gradient(135deg,#e0e0e0,#77dfff,#a78bfa,#77dfff,#e0e0e0);

background-size:400% 100%;

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

background-clip:text;

animation:headingShimmer 6s ease-in-out infinite;

transition:filter .4s,text-shadow .4s;

}

h2:hover, h3:hover{

filter:brightness(1.4);

text-shadow:0 0 20px rgba(119,223,255,.25),0 0 50px rgba(167,139,250,.15);

animation-duration:1.5s;

}

@keyframes headingShimmer{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:200% 50%;}

}

.hero p{

max-width:700px;

margin:auto;

font-size:20px;

color:#b6b6b6;

line-height:1.8;

}

.hero p strong{

display:block;

color:#9fdcff;

font-weight:700;

letter-spacing:1px;

margin-top:16px;

}

.primaryButton{

margin-top:40px;

padding:18px 45px;

background:#202425;

border:none;

border-radius:50px;

color:white;

font-size:18px;

cursor:pointer;

transition:.4s;

box-shadow:0 0 25px rgba(0,255,255,.15);

}

.primaryButton:hover{

transform:translateY(-5px);

box-shadow:0 0 40px cyan;

}

#discover{
flex-direction:column;
gap:35px;
position:relative;
z-index:0;
}

#discover::before{
content:"";
position:absolute;
inset:0;
background-image:url(https://images.unsplash.com/photo-1513836279014-a89f7a76ae86?auto=format&fit=crop&w=1920&q=80);
background-size:cover;
background-position:center 30%;
opacity:.25;
mix-blend-mode:overlay;
pointer-events:none;
z-index:0;
border-radius:inherit;
}

#discover > *{
position:relative;
z-index:1;
}

.gridSection{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

gap:35px;

}

.card{

background:#1b1c1e;

border-radius:20px;

padding:35px;

transition:.45s;

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

backdrop-filter:blur(30px);

}

.card:hover{

transform:translateY(-12px);

box-shadow:0 20px 50px rgba(0,255,255,.12);

}

.card h2{

margin-bottom:15px;

}

/* ================================
        FLIP CARD
=============================== */

.card.card-flip{

perspective:1200px;

overflow:visible;

padding:0;

background:none;

border:none;

backdrop-filter:none;

cursor:pointer;

}

.card-big{

width:min(100%,720px);

margin:60px auto 0;

}

.card-flip .flipInner{

position:relative;

width:100%;

min-height:280px;

transition:transform .8s cubic-bezier(.4,0,.2,1);

transform-style:preserve-3d;

}

.card-big .flipInner{

min-height:360px;

}

.card-flip:hover .flipInner{

transform:rotateY(180deg);

}

.card-flip.flipped .flipInner{

transform:rotateY(180deg);

}

.card-flip .flipFront,
.card-flip .flipBack{

position:absolute;

inset:0;

padding:44px 42px;

border-radius:20px;

backface-visibility:hidden;

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

backdrop-filter:blur(30px);

overflow-y:auto;

}

.card-flip .flipFront{

background:#1b1c1e;

z-index:2;

}

.card-flip .flipFront p{
line-height:1.85;
color:#c0c0c0;
margin-top:12px;
font-size:15px;
}

.card-flip .flipFront h2{
margin-bottom:4px;
}

.card-flip .flipBack{

background:linear-gradient(145deg,#1b1c1e,#151718);

transform:rotateY(180deg);

z-index:1;

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

text-align:center;

}

.card-flip .flipBack h2{

margin-bottom:12px;

}

.card-flip .flipBack p{

color:#b6b6b6;

line-height:1.9;

font-size:16px;

max-width:88%;

}

.card-flip:hover{

transform:none;

box-shadow:none;

}

.timeline{

flex-direction:column;

gap:25px;

}

.timelineItem{

width:80%;

padding:30px;

background:#1b1d20;

border-left:5px solid cyan;

border-radius:15px;

transition:.4s;

}

.timelineItem:hover{

transform:translateX(15px);

}

.feature{

justify-content:space-between;

gap:80px;

}

.featureImage{

width:450px;

height:450px;

border-radius:40px;

background:

linear-gradient(145deg,#2b2b2b,#171717);

box-shadow:

0 0 80px rgba(0,255,255,.10);

}

footer{

padding:40px;

text-align:center;

color:#777;

}

.fade{

opacity:0;

transform:translateY(80px);

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

}

.slideLeft{

opacity:0;

transform:translateX(-100px);

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

}

.slideRight{

opacity:0;

transform:translateX(100px);

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

}

.show{

opacity:1;

transform:translate(0);

}

@media(max-width:900px){

.hero h1{

font-size:48px;

}

header{

padding:20px;

}

.feature{

flex-direction:column;

}

.featureImage{

width:100%;
height:350px;
}

}
/* ================================
        MORPH TRANSITIONS
================================ */

#transitionLayer{

position:fixed;
top:0;
left:0;
width:100%;
height:100%;
pointer-events:none;
z-index:99999;
overflow:hidden;

}

/* Full-viewport veil: keeps a constant blur radius and only
   crossfades opacity, so the browser can cache the blurred
   backdrop instead of re-blurring every frame (smooth on any
   screen size, no per-frame blur lag). */

#transitionLayer::before{

content:"";
position:absolute;
inset:0;
pointer-events:none;

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

background:
radial-gradient(circle at center,
rgba(0,229,255,.12),
rgba(10,10,12,.45));

opacity:0;
will-change:opacity;
transition:opacity .25s ease;

}

body.pageTransition #transitionLayer::before{

opacity:1;

}

.transitionBlob{

position:absolute;

top:50%;
left:50%;

width:80px;
height:80px;

border-radius:50%;

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

background:
radial-gradient(circle,
rgba(0,255,255,.9),
rgba(60,180,255,.75),
rgba(10,10,10,.98));

filter:

blur(20px)
contrast(180%);

opacity:0;

}

.transitionBlob.animate{

animation:morphPage .9s cubic-bezier(.7,0,.2,1);

}

@keyframes morphPage{

0%{

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

opacity:0;

}

20%{

opacity:1;

}

60%{

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

opacity:1;

}

100%{

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

opacity:0;

}

}

/* Responsive blob base size: keep it small on phones, large
   enough to fully cover very wide/tall screens at peak scale. */

@media(min-width:1920px){

.transitionBlob{

width:120px;
height:120px;

}

}


/* Smooth section fade */

section{

transition:

opacity .5s cubic-bezier(.22,1,.36,1),
transform .5s cubic-bezier(.22,1,.36,1),
filter .5s cubic-bezier(.22,1,.36,1);

}

section.activeSection{

opacity:1;
filter:blur(0);

}

section.inactive{

opacity:.35;
filter:blur(4px);

}


/* Gameboy hover effect */

nav a{

position:relative;

}

/* pixel frame with light sweep */
nav a::before{

content:"";

position:absolute;

inset:-6px -8px;

border:2px solid transparent;

transition:border-color .45s ease,box-shadow .45s ease;

pointer-events:none;

background:linear-gradient(110deg,transparent 30%,rgba(155,188,15,.06) 50%,transparent 70%);

background-size:250% 100%;

background-position:250% 0;

}

nav a:hover::before{

border-color:#9bbc0f;

box-shadow:0 0 0 2px #306230,0 0 18px rgba(155,188,15,.2);

background-position:-250% 0;

transition:border-color .45s ease,box-shadow .45s ease,background-position .7s cubic-bezier(.4,0,.2,1);

}

nav a::after{

content:"";

position:absolute;

bottom:-3px;
left:-2px;

width:calc(100% + 4px);
height:2px;

background:

linear-gradient(
90deg,
transparent,
#9bbc0f,
transparent);

transform:translateX(-120%);

transition:transform .7s cubic-bezier(.4,0,.2,1);

}

nav a:hover::after{

transform:translateX(120%);

}

/* Active nav tab */

nav a.active{

color:#7de8ff;

text-shadow:0 0 12px rgba(125,232,255,.5),0 0 40px rgba(125,232,255,.15);

letter-spacing:2px;

}

nav a.active::before{

border-color:#7de8ff;

box-shadow:0 0 0 2px rgba(125,232,255,.12),0 0 18px rgba(125,232,255,.25);

background-position:-250% 0;

}

nav a.active::after{

transform:translateX(0);

background:linear-gradient(90deg,transparent,#7de8ff,transparent);

}



/* Button ripple */

.primaryButton{

overflow:hidden;
position:relative;

}

.primaryButton span{

position:relative;
z-index:2;

}

.primaryButton::before{

content:"";

position:absolute;

width:20px;
height:20px;

border-radius:50%;

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

transform:scale(0);

transition:.6s;

}

.primaryButton:hover::before{

transform:scale(20);

opacity:0;

}

/* ================================
        MILKY WAY BG
=============================== */

.milky-bg{
position:relative;
}

.milky-bg::before{
content:"";
position:fixed;
inset:0;
background-size:cover;
background-position:center;
opacity:.12;
mix-blend-mode:screen;
pointer-events:none;
z-index:-1;
background-image:url(https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1920&q=80);
}

.page-health.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1504333638930-c8787321eee0?auto=format&fit=crop&w=1920&q=80);
opacity:.15;
}

.page-discover.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?auto=format&fit=crop&w=1920&q=80);
opacity:.14;
}

.page-psychology.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1543722530-d2c3201371e7?auto=format&fit=crop&w=1920&q=80);
opacity:.13;
}

.page-technology.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1446776811953-b23d57bd21aa?auto=format&fit=crop&w=1920&q=80);
opacity:.15;
}

.page-contact.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1506703719100-a0f3a48d2541?auto=format&fit=crop&w=1920&q=80);
opacity:.14;
}

.page-account.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1920&q=80);
opacity:.13;
}

.page-profile.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1508614999368-9260051292e5?auto=format&fit=crop&w=1920&q=80);
opacity:.12;
}

/* ================================
        PAGE CARD PRESENTATION
=============================== */

.grid-4{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
width:100%;
max-width:1100px;
margin:0 auto;
padding:40px 0;
}

@media(max-width:600px){
.grid-4{grid-template-columns:1fr;}
}

.grid-4 .card{
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
min-height:0;
}

.grid-4 .card .card-icon{
font-size:34px;
width:64px;
height:64px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,.04);
border-radius:16px;
border:1px solid rgba(255,255,255,.08);
margin-bottom:6px;
flex-shrink:0;
}

.grid-4 .card h2{
font-size:22px;
letter-spacing:.5px;
}

.grid-4 .card h2::after{
content:"";
display:block;
width:38px;
height:3px;
margin-top:12px;
border-radius:3px;
background:var(--accent,rgba(0,229,255,.8));
}

.grid-4 .card p{
line-height:1.85;
color:#b8b8b8;
margin-top:4px;
font-size:15px;
flex:1;
}

.grid-4 .card ul{
list-style:none;
margin:6px 0 0;
padding:0;
}

.grid-4 .card ul li{
position:relative;
padding-left:20px;
margin-bottom:8px;
line-height:1.7;
color:#b8b8b8;
font-size:15px;
}

.grid-4 .card ul li::before{
content:"▸";
position:absolute;
left:0;
color:var(--accent,rgba(0,229,255,.8));
}

.grid-4 .card strong{
color:#e8e8e8;
}

/* --- Per-page accent colors --- */

.page-health .card{--accent:rgba(80,230,140,.8);}
.page-discover .card{--accent:rgba(0,229,255,.8);}
.page-psychology .card{--accent:rgba(180,130,255,.8);}
.page-technology .card{--accent:rgba(0,200,255,.8);}
.page-contact .card{--accent:rgba(255,215,0,.8);}
.page-account .card{--accent:rgba(0,229,255,.8);}
.page-profile .card{--accent:rgba(0,229,255,.8);}

/* ================================
        PAGE CARD EFFECTS
=============================== */

/* --- HEALTH — Vitality Pulse (auto-play cascade) --- */

.page-health .card{
transition:transform .4s ease,box-shadow .4s ease,border-color .4s ease;
animation:healthPulse 2.4s ease-in-out infinite;
border-color:rgba(80,230,140,.15);
}

.page-health .card:nth-child(2){
animation-delay:.6s;
}

.page-health .card:nth-child(3){
animation-delay:1.2s;
}

.page-health .card:nth-child(4){
animation-delay:1.8s;
}

.page-health .card:hover{
transform:translateY(-8px);
}

@keyframes healthPulse{
0%,100%{box-shadow:0 0 25px rgba(80,230,140,.18),0 0 50px rgba(80,230,140,.06),inset 0 0 25px rgba(80,230,140,.03);border-color:rgba(80,230,140,.15);}
50%{box-shadow:0 0 45px rgba(80,230,140,.32),0 0 80px rgba(80,230,140,.12),inset 0 0 35px rgba(80,230,140,.07);border-color:rgba(80,230,140,.3);}
}

/* --- DISCOVER — Subtle Breath & Sheen (auto-play cascade) --- */

.page-discover .card{
position:relative;
overflow:hidden;
transition:transform .45s ease;
animation:discoverBreath 4.5s ease-in-out infinite;
}

.page-discover .card:nth-child(2){
animation-delay:1.1s;
}

.page-discover .card:nth-child(3){
animation-delay:2.2s;
}

.page-discover .card:nth-child(4){
animation-delay:3.3s;
}

.page-discover .card::after{
content:"";
position:absolute;
top:0;
left:-120%;
width:70%;
height:100%;
background:linear-gradient(100deg,transparent,rgba(0,229,255,.05),transparent);
transform:skewX(-15deg);
pointer-events:none;
animation:discoverSheen 7s ease-in-out infinite;
}

.page-discover .card:nth-child(2)::after{
animation-delay:1.75s;
}

.page-discover .card:nth-child(3)::after{
animation-delay:3.5s;
}

.page-discover .card:nth-child(4)::after{
animation-delay:5.25s;
}

.page-discover .card:hover{
transform:translateY(-6px);
}

@keyframes discoverBreath{
0%,100%{box-shadow:0 0 18px rgba(0,229,255,.05),inset 0 0 18px rgba(0,229,255,.02);}
50%{box-shadow:0 0 34px rgba(0,229,255,.13),inset 0 0 28px rgba(0,229,255,.05);}
}

@keyframes discoverSheen{
0%{left:-120%;}
40%{left:-120%;}
60%{left:120%;}
100%{left:120%;}
}

/* --- PSYCHOLOGY — Floating Sway (auto-play cascade) --- */

.page-psychology .card{
transition:transform .4s ease,box-shadow .4s ease;
animation:psyFloat 3.2s ease-in-out infinite;
box-shadow:0 20px 45px rgba(180,130,255,.1),0 8px 25px rgba(180,130,255,.05);
}

.page-psychology .card:nth-child(2){
animation-delay:.8s;
}

.page-psychology .card:nth-child(3){
animation-delay:1.6s;
}

.page-psychology .card:nth-child(4){
animation-delay:2.4s;
}

.page-psychology .card:hover{
animation-play-state:paused;
}

@keyframes psyFloat{
0%,100%{transform:translateY(0) rotate(0deg);}
25%{transform:translateY(-14px) rotate(.6deg);}
50%{transform:translateY(-6px) rotate(-.4deg);}
75%{transform:translateY(-16px) rotate(.5deg);}
}

/* --- TECHNOLOGY — Scan Line --- */

.page-technology .card{
position:relative;
overflow:hidden;
transition:transform .4s ease;
}

.page-technology .card:hover{
transform:translateY(-5px);
}

.page-technology .card::after{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;
background:linear-gradient(90deg,transparent,rgba(0,230,255,.7),transparent);
opacity:0;
transition:opacity .3s ease;
}

.page-technology .card:hover::after{
opacity:1;
animation:techScan .8s linear infinite;
}

@keyframes techScan{
0%{top:-4px;}
100%{top:calc(100% + 4px);}
}

/* --- CONTACT — Radial Bloom --- */

.page-contact .card{
position:relative;
transition:transform .45s cubic-bezier(.34,1.56,.64,1),box-shadow .45s ease,border-color .45s ease;
}

.page-contact .card:hover{
transform:scale(1.04);
border-color:rgba(255,215,0,.25);
box-shadow:0 0 40px rgba(255,215,0,.12),0 0 80px rgba(255,215,0,.06),inset 0 0 50px rgba(255,215,0,.04);
}

.page-contact .card::before{
content:"";
position:absolute;
inset:0;
border-radius:20px;
background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,215,0,.08),transparent 60%);
opacity:0;
transition:opacity .4s ease;
pointer-events:none;
}

.page-contact .card:hover::before{
opacity:1;
}

/* ================================
        FIREFLIES
=============================== */

.fireflies,
.fireflies-front{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
}

.fireflies{
z-index:0;
}

.fireflies-front{
z-index:2;
}

.firefly{
position:absolute;
border-radius:50%;
animation:fireflyFloat linear infinite;
}

@keyframes fireflyFloat{
0%{transform:translate(0,0) scale(.3);opacity:0;}
8%{opacity:1;}
20%{transform:translate(40px,-40px) scale(1);}
35%{opacity:.3;}
50%{transform:translate(-30px,-90px) scale(.8);}
65%{opacity:1;}
80%{transform:translate(25px,-130px) scale(.5);}
92%{opacity:0;}
100%{transform:translate(0,-170px) scale(.2);opacity:0;}
}

.page-discover section{
position:relative;
z-index:1;
}

/* ================================
        MISSION CARD
=============================== */

.mission-card{
max-width:860px;
margin:60px auto;
padding:70px 60px;
text-align:center;
border-radius:28px;
background:linear-gradient(160deg,rgba(27,28,30,.88),rgba(15,16,18,.94));
border:1px solid rgba(0,200,255,.12);
backdrop-filter:blur(30px);
position:relative;
overflow:hidden;
display:flex;
flex-direction:column;
align-items:center;
gap:16px;
box-shadow:0 0 60px rgba(0,200,255,.06),inset 0 0 60px rgba(0,200,255,.02);
}

.mission-card::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 0%,rgba(0,200,255,.1),transparent 60%);
pointer-events:none;
}

.mission-card::after{
content:"";
position:absolute;
top:-4px;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,transparent,rgba(0,200,255,.5),transparent);
animation:techScan 3s linear infinite;
pointer-events:none;
}

.mission-icon{
font-size:52px;
width:90px;
height:90px;
display:flex;
align-items:center;
justify-content:center;
background:rgba(0,200,255,.06);
border:1px solid rgba(0,200,255,.15);
border-radius:24px;
position:relative;
animation:missionFloat 4s ease-in-out infinite;
}

.mission-card h2{
font-size:34px;
letter-spacing:1px;
position:relative;
}

.mission-card p{
font-size:19px;
line-height:1.9;
color:#b8b8b8;
max-width:680px;
position:relative;
}

@keyframes missionFloat{
0%,100%{transform:translateY(0);}
50%{transform:translateY(-8px);}
}

/* ================================
        COLORFUL STARS
=============================== */

.stars{
position:fixed;
inset:0;
pointer-events:none;
overflow:hidden;
z-index:-1;
}

.star{
position:absolute;
border-radius:50%;
animation:starFloat linear infinite;
}

@keyframes starFloat{
0%{transform:translate(0,0) scale(.3);opacity:0;}
12%{opacity:1;}
50%{transform:translate(25px,-70px) scale(1);}
88%{opacity:.8;}
100%{transform:translate(-15px,-150px) scale(.4);opacity:0;}
}

/* ================================
        CTA SECTION
=============================== */

.ctaSection{
position:relative;
padding:130px 10%;
text-align:center;
overflow:hidden;
border-top:1px solid rgba(255,255,255,.06);
flex-direction:column;
gap:0;
}

.ctaSection::before{
content:"";
position:absolute;
inset:0;
background-image:url(https://images.unsplash.com/photo-1462331940025-496dfbfc7564?auto=format&fit=crop&w=1920&q=80);
background-size:cover;
background-position:center;
opacity:.16;
mix-blend-mode:screen;
z-index:0;
}

.ctaOverlay{
position:absolute;
inset:0;
background:radial-gradient(ellipse at center,rgba(0,229,255,.06),transparent 70%);
z-index:0;
}

.ctaSection h2,
.ctaSection p,
.ctaSection .ctaButton{
position:relative;
z-index:1;
}

.ctaSection h2{
font-size:44px;
letter-spacing:1px;
margin-bottom:18px;
}

.ctaSection p{
font-size:19px;
line-height:1.8;
color:#b6b6b6;
max-width:620px;
margin:0 auto 45px;
}

.ctaButton{
display:inline-block;
padding:18px 55px;
background:#202425;
border:1px solid rgba(0,229,255,.25);
border-radius:50px;
color:#7de8ff;
font-size:17px;
letter-spacing:1px;
cursor:pointer;
text-decoration:none;
transition:.4s;
}

.ctaButton:hover{
background:rgba(0,229,255,.1);
box-shadow:0 0 45px rgba(0,229,255,.3);
transform:translateY(-4px);
color:#fff;
}

/* ================================
        RESPONSIVE / MOBILE
=============================== */

@media(max-width:900px){

header{
flex-direction:column;
gap:10px;
padding:14px 20px;
}

nav{
gap:10px;
flex-wrap:wrap;
justify-content:center;
}

nav a{
padding:6px 10px;
font-size:14px;
}

section{
padding:150px 6% 80px;
}

.hero h1{
font-size:44px;
}

.hero p{
font-size:18px;
}

.timelineItem{
width:94%;
}

.grid-4{
max-width:100%;
}

}

@media(max-width:600px){

header{
padding:12px 10px;
}

.logo{
font-size:19px;
letter-spacing:4px;
}

nav{
gap:4px;
}

nav a{
font-size:12px;
padding:6px 8px;
letter-spacing:0;
}

section{
padding:160px 5% 60px;
}

.hero h1{
font-size:34px;
margin-bottom:18px;
}

.hero p{
font-size:16px;
}

.hero p strong{
font-size:17px;
}

.primaryButton{
padding:15px 38px;
font-size:16px;
}

.card{
padding:24px;
}

.gridSection{
gap:22px;
}

.card-big{
margin:40px auto 0;
}

.card-flip .flipFront,
.card-flip .flipBack{
padding:28px 22px;
}

.timelineItem{
width:100%;
padding:22px;
}

.timelineItem:hover{
transform:translateX(8px);
}

.mission-card{
padding:45px 24px;
}

.mission-card h2{
font-size:26px;
}

.mission-card p{
font-size:16px;
}

.mission-icon{
width:72px;
height:72px;
font-size:42px;
}

.ctaSection{
padding:90px 6%;
}

.ctaSection h2{
font-size:32px;
}

.ctaSection p{
font-size:16px;
}

.ctaButton{
padding:15px 40px;
font-size:15px;
}

.grid-4{
gap:18px;
padding:15px 0;
}

.grid-4 .card h2{
font-size:20px;
}

.fireflies-front .firefly{
display:none;
}

}

@media(max-width:380px){

.hero h1{
font-size:28px;
}

nav a{
font-size:11px;
padding:5px 6px;
}

}

/* Respect users who prefer reduced motion */

@media(prefers-reduced-motion:reduce){

html{
scroll-behavior:auto;
}

#transitionLayer::before{
opacity:0 !important;
transition:none !important;
}

.transitionBlob{
animation:none !important;
}

.backgroundGlow,
.star,
.firefly{
animation:none !important;
}

section{
transition:none !important;
}

}

/* ================================
        ACCOUNT & PROFILE
=============================== */

.authWrap,
.profileWrap{
width:min(100%,520px);
margin:0 auto;
}

.authCard,
.profileCard{
background:linear-gradient(160deg,rgba(27,28,30,.9),rgba(15,16,18,.95));
border:1px solid rgba(0,229,255,.14);
border-radius:28px;
padding:44px 40px;
backdrop-filter:blur(30px);
box-shadow:0 0 60px rgba(0,229,255,.07),inset 0 0 60px rgba(0,229,255,.02);
position:relative;
overflow:hidden;
}

.authCard::before,
.profileCard::before{
content:"";
position:absolute;
top:-4px;
left:0;
width:100%;
height:3px;
background:linear-gradient(90deg,transparent,rgba(0,229,255,.5),transparent);
animation:techScan 3s linear infinite;
pointer-events:none;
}

.authTabs{
display:flex;
flex-wrap:wrap;
gap:8px;
margin-bottom:28px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:50px;
padding:5px;
}

.authTab{
flex:1 1 120px;
padding:11px 0;
border:none;
border-radius:50px;
background:transparent;
color:#b6b6b6;
font-size:15px;
cursor:pointer;
transition:.35s;
}

.authTab:hover{
color:#fff;
}

.authTab.active{
background:rgba(0,229,255,.12);
color:#7de8ff;
box-shadow:0 0 20px rgba(0,229,255,.15);
}

.authForm{
display:flex;
flex-direction:column;
gap:8px;
}

.authForm h2{
margin-bottom:4px;
}

.authSub{
color:#b6b6b6;
line-height:1.7;
font-size:15px;
margin-bottom:18px;
}

.authForm label{
font-size:13px;
color:#9fdcff;
letter-spacing:1px;
margin-top:12px;
text-transform:uppercase;
}

.authForm input{
padding:14px 16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
color:#fff;
font-size:15px;
outline:none;
transition:.3s;
}

.authForm input::placeholder{
color:#6b6b6b;
}

.authForm input:focus{
border-color:rgba(0,229,255,.5);
box-shadow:0 0 0 3px rgba(0,229,255,.12);
background:rgba(0,229,255,.04);
}

.authButton{
margin-top:22px;
padding:16px 0;
border:none;
border-radius:50px;
background:#202425;
border:1px solid rgba(0,229,255,.25);
color:#7de8ff;
font-size:16px;
letter-spacing:1px;
cursor:pointer;
transition:.4s;
}

.authButton:hover{
background:rgba(0,229,255,.1);
box-shadow:0 0 40px rgba(0,229,255,.3);
transform:translateY(-3px);
color:#fff;
}

.authButton.ghost{
background:transparent;
border-color:rgba(255,255,255,.15);
color:#b6b6b6;
}

.authButton.ghost:hover{
background:rgba(255,80,80,.1);
border-color:rgba(255,80,80,.4);
color:#ff9090;
box-shadow:0 0 30px rgba(255,80,80,.15);
}

.authMsg{
margin-top:14px;
font-size:14px;
min-height:18px;
text-align:center;
}

.authMsg.error{
color:#ff9090;
}

.authMsg.ok{
color:#7de8ff;
}

/* --- PROFILE --- */

.profileCard{
text-align:center;
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
}

.profileAvatar{
width:96px;
height:96px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:40px;
font-weight:700;
color:#7de8ff;
background:linear-gradient(145deg,rgba(0,229,255,.12),rgba(0,229,255,.04));
border:2px solid rgba(0,229,255,.35);
box-shadow:0 0 40px rgba(0,229,255,.25);
margin-bottom:8px;
}

.profileRole{
color:#9bbc0f;
font-size:14px;
letter-spacing:2px;
text-transform:uppercase;
margin-bottom:18px;
}

.profileField{
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
gap:16px;
padding:14px 16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
margin-top:10px;
}

.profileField span{
color:#777;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
}

.profileField strong{
color:#e8e8e8;
font-size:15px;
text-align:right;
word-break:break-all;
}

.profileActions{
width:100%;
display:flex;
gap:12px;
margin-top:26px;
}

.profileActions .ctaButton{
flex:1;
padding:14px 0;
text-align:center;
font-size:15px;
}

.profileActions .authButton{
flex:1;
margin-top:0;
font-size:15px;
}

.profileBio{
width:100%;
margin-top:14px;
padding:16px;
background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.08);
border-radius:12px;
color:#b8b8b8;
font-size:14px;
line-height:1.7;
text-align:left;
}

.profileWrap{
display:flex;
flex-direction:column;
gap:28px;
}

.profileEditCard{
text-align:center;
}

.profileEditCard .authForm{
text-align:left;
}

.profileEditCard textarea{
font-family:inherit;
}

.profileEditCard input[type="color"]{
width:100%;
height:48px;
padding:6px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
cursor:pointer;
}

.profileEditCard input[type="color"]::-webkit-color-swatch-wrapper{
padding:2px;
}

.profileEditCard input[type="color"]::-webkit-color-swatch{
border:none;
border-radius:8px;
}

@media(max-width:600px){

.authCard,
.profileCard{
padding:34px 22px;
}

.authTabs{
border-radius:22px;
}

.profileActions{
flex-direction:column;
}

}

/* ================================
        COMMUNITY FEED
=============================== */

.page-feed.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?auto=format&fit=crop&w=1920&q=80);
opacity:.12;
}

.feedHero{
flex-direction:column;
text-align:center;
gap:0;
}

.feedHero h1{
font-size:56px;
margin-bottom:18px;
}

.feedHero p{
max-width:640px;
color:#b6b6b6;
font-size:19px;
line-height:1.8;
margin-bottom:10px;
}

.feedSection{
flex-direction:column;
gap:24px;
align-items:stretch;
}

.feedControls{
display:flex;
flex-wrap:wrap;
justify-content:space-between;
align-items:center;
gap:16px;
width:100%;
max-width:1100px;
margin:0 auto;
}

.radiusControl{
display:flex;
align-items:center;
gap:14px;
padding:12px 18px;
background:#1b1c1e;
border:1px solid rgba(255,255,255,.08);
border-radius:50px;
}

.radiusControl label{
color:#9fdcff;
font-size:13px;
letter-spacing:1px;
text-transform:uppercase;
}

.radiusControl span{
color:#e8e8e8;
font-size:14px;
min-width:44px;
text-align:right;
}

.radiusControl input[type="range"]{
accent-color:#00e5ff;
width:180px;
}

.feedControls .authButton{
margin-top:0;
padding:12px 22px;
font-size:14px;
}

#feedMap{
width:100%;
max-width:1100px;
height:460px;
margin:0 auto;
border-radius:24px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 0 50px rgba(0,229,255,.08);
z-index:1;
}

.feedStatus{
text-align:center;
color:#777;
font-size:14px;
letter-spacing:1px;
}

#feedList{
width:100%;
max-width:1100px;
}

.eventCard{
position:relative;
cursor:pointer;
min-height:0;
}

.eventCard:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,229,255,.12);
}

.eventCat{
display:inline-block;
padding:5px 14px;
margin-bottom:14px;
border-radius:50px;
font-size:12px;
letter-spacing:1px;
text-transform:uppercase;
color:var(--cat);
background:color-mix(in srgb,var(--cat) 12%,transparent);
border:1px solid color-mix(in srgb,var(--cat) 40%,transparent);
}

.eventCard h2{
margin-bottom:10px;
}

.eventCard p{
line-height:1.8;
color:#b8b8b8;
font-size:15px;
margin-bottom:6px;
flex:none;
}

.eventCard ul{
list-style:none;
margin:10px 0 0;
padding:0;
}

.eventCard ul li{
position:relative;
padding-left:20px;
margin-bottom:8px;
line-height:1.7;
color:#b8b8b8;
font-size:14px;
}

.eventCard ul li::before{
content:"▸";
position:absolute;
left:0;
color:#00e5ff;
}

.eventCard ul li strong{
color:#e8e8e8;
}

.eventDist{
display:inline-block;
margin-top:14px;
padding:6px 14px;
border-radius:50px;
background:rgba(0,229,255,.08);
border:1px solid rgba(0,229,255,.25);
color:#7de8ff;
font-size:13px;
letter-spacing:1px;
}

.feedEmpty{
grid-column:1/-1;
text-align:center;
color:#b6b6b6;
font-size:17px;
padding:40px 0;
}

/* --- Feed map markers --- */

.feed-pin span{
display:block;
width:100%;
height:100%;
border-radius:50%;
border:2px solid rgba(255,255,255,.75);
box-shadow:0 0 12px currentColor;
}

.feed-pin.user span{
position:relative;
border-color:rgba(255,255,255,.9);
box-shadow:0 0 16px rgba(0,229,255,.9);
}

.feed-pin.user span::after{
content:"";
position:absolute;
inset:-7px;
border-radius:50%;
border:2px solid rgba(0,229,255,.55);
animation:pinPulse 2.2s ease-out infinite;
}

@keyframes pinPulse{
0%{transform:scale(.5);opacity:1;}
100%{transform:scale(1.9);opacity:0;}
}

/* --- Create event modal --- */

.modal{
position:fixed;
inset:0;
z-index:1000;
background:rgba(5,6,8,.8);
backdrop-filter:blur(12px);
-webkit-backdrop-filter:blur(12px);
display:flex;
align-items:center;
justify-content:center;
padding:20px;
overflow-y:auto;
}

.modal[hidden]{
display:none;
}

.modalCard{
width:min(100%,560px);
position:relative;
background:linear-gradient(160deg,rgba(27,28,30,.98),rgba(15,16,18,.99));
border:1px solid rgba(0,229,255,.14);
border-radius:28px;
padding:40px 36px;
box-shadow:0 0 70px rgba(0,229,255,.12);
animation:modalIn .35s cubic-bezier(.34,1.56,.64,1);
}

@keyframes modalIn{
from{transform:translateY(30px) scale(.96);opacity:0;}
to{transform:translateY(0) scale(1);opacity:1;}
}

.modalClose{
position:absolute;
top:16px;
right:18px;
width:38px;
height:38px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.06);
color:#ccc;
font-size:22px;
line-height:1;
cursor:pointer;
transition:.3s;
}

.modalClose:hover{
background:rgba(255,80,80,.15);
color:#ff9090;
}

.modalCard h2{
margin-bottom:20px;
}

.authForm select,
.authForm textarea{
padding:14px 16px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:12px;
color:#fff;
font-size:15px;
outline:none;
transition:.3s;
font-family:inherit;
resize:vertical;
}

.authForm select:focus,
.authForm textarea:focus{
border-color:rgba(0,229,255,.5);
box-shadow:0 0 0 3px rgba(0,229,255,.12);
background:rgba(0,229,255,.04);
}

.authForm select option{
background:#1b1c1e;
color:#fff;
}

.feedFormRow{
display:grid;
grid-template-columns:1fr 1fr;
gap:14px;
}

#createMap{
width:100%;
height:260px;
border-radius:16px;
border:1px solid rgba(255,255,255,.1);
box-shadow:0 0 30px rgba(0,229,255,.08);
margin:6px 0 14px;
z-index:1;
}

.modalCard .authButton{
margin-top:18px;
}

/* --- Dark leaflet popups --- */

.leaflet-popup-content-wrapper{
background:#1b1c1e;
color:#e8e8e8;
border:1px solid rgba(0,229,255,.25);
box-shadow:0 10px 40px rgba(0,0,0,.6);
border-radius:12px;
}

.leaflet-popup-tip{
background:#1b1c1e;
border:1px solid rgba(0,229,255,.25);
}

.leaflet-popup-content{
font-size:14px;
line-height:1.5;
}

.leaflet-popup-close-button{
color:#999 !important;
}

.leaflet-container{
background:#0e1012;
font-family:inherit;
}

@media(max-width:600px){

.feedHero h1{
font-size:38px;
}

#feedMap{
height:340px;
}

.feedControls{
justify-content:center;
}

.feedFormRow{
grid-template-columns:1fr;
}

.modalCard{
padding:30px 20px;
}

}

/* ================================
        EXPLORE PAGE
=============================== */

.page-explore.milky-bg::before{
background-image:url(https://images.unsplash.com/photo-1531058020387-3be344556be6?auto=format&fit=crop&w=1920&q=80);
opacity:.12;
}

.exploreHero{
flex-direction:column;
text-align:center;
gap:0;
}

.exploreHero h1{
font-size:56px;
margin-bottom:18px;
}

.exploreHero p{
max-width:640px;
color:#b6b6b6;
font-size:19px;
line-height:1.8;
margin-bottom:10px;
}

.exploreSection{
flex-direction:column;
gap:24px;
align-items:stretch;
}

.exploreControls{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:14px;
width:100%;
max-width:1100px;
margin:0 auto;
}

.searchBox{
flex:1 1 320px;
min-width:220px;
padding:14px 18px;
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.1);
border-radius:50px;
color:#fff;
font-size:15px;
outline:none;
transition:.3s;
}

.searchBox::placeholder{
color:#6b6b6b;
}

.searchBox:focus{
border-color:rgba(0,229,255,.5);
box-shadow:0 0 0 3px rgba(0,229,255,.12);
background:rgba(0,229,255,.04);
}

.filterSelect{
padding:14px 18px;
background:#1b1c1e;
border:1px solid rgba(255,255,255,.12);
border-radius:50px;
color:#e8e8e8;
font-size:14px;
cursor:pointer;
outline:none;
transition:.3s;
}

.filterSelect:focus{
border-color:rgba(0,229,255,.5);
}

.filterSelect option{
background:#1b1c1e;
color:#fff;
}

.exploreCard{
text-decoration:none;
display:flex;
flex-direction:column;
align-items:flex-start;
text-align:left;
min-height:0;
}

.exploreCard:hover{
transform:translateY(-8px);
box-shadow:0 20px 50px rgba(0,229,255,.12);
}

.exploreCard h2{
margin-bottom:10px;
}

@media(max-width:600px){

.exploreHero h1{
font-size:38px;
}

.exploreControls{
flex-direction:column;
align-items:stretch;
}

.searchBox{
flex:auto;
width:100%;
}

}