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

body{
font-family:'Lato',sans-serif;
background:#050505;
color:white;
overflow-x:hidden;
}

/* NAVBAR */

nav{
position:fixed;
top:0;
width:100%;
display:flex;
justify-content:space-between;
align-items:center;
padding:14px 60px;
z-index:20;
background:rgba(0,0,0,0.22);
backdrop-filter:blur(8px);
border-bottom:1px solid rgba(255,255,255,0.06);
}

nav .logo{
font-weight:700;
letter-spacing:2px;
font-size:14px;
}

nav ul{
display:flex;
list-style:none;
gap:28px;
}

nav a{
text-decoration:none;
color:#a8a8a8;
font-size:13px;
transition:color 220ms ease;
}

nav a:hover{
color:#ffffff;
}

@media (max-width:700px){
nav{
padding:12px 14px;
}

nav .logo{
font-size:11px;
}

nav ul{
gap:12px;
}

nav a{
font-size:11px;
}
}



/* HERO */

.hero{
height:100vh;
display:flex;
align-items:center;
justify-content:space-between;
padding:0 8vw;
position:relative;
background-image:url("img_assets/bg_black_circles.png");
background-repeat:no-repeat;
background-position:center;
background-size:cover;
}

/* LEFT FLOATING PANELS */

.left-panels{
width:40%;
position:relative;
}

.panel{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
border-radius:14px;
padding:28px;
margin-bottom:30px;
backdrop-filter:blur(10px);
animation:float 6s ease-in-out infinite;
transition:transform .25s ease;
}

.panel:nth-child(2){
animation-delay:2s;
}

.panel h3{
margin-bottom:10px;
font-weight:600;
}

.panel p{
font-size:14px;
color:#bbb;
line-height:1.6;
}

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

/* RIGHT WELCOME */

.right-hero{
width:45%;
text-align:right;
display:flex;
flex-direction:column;
align-items:flex-end;
}

.hero-logo{
max-width:200px;
height:auto;
margin-bottom:40px;
image-rendering:-webkit-optimize-contrast;
image-rendering:crisp-edges;
opacity:0.85;
mix-blend-mode:screen;
filter:drop-shadow(0 8px 24px rgba(154, 108, 255, 0.2)) brightness(1.15) contrast(1.1);
transition:transform .3s ease, filter .3s ease, opacity .3s ease;
}

.hero-logo:hover{
transform:scale(1.05);
opacity:0.95;
filter:drop-shadow(0 12px 32px rgba(154, 108, 255, 0.3)) brightness(1.25) contrast(1.15);
}

.welcome{
font-size:90px;
font-weight:800;
line-height:1;
letter-spacing:-2px;
margin-bottom:30px;
transition:transform .2s ease;
}

.scroll-link{
display:inline-block;
font-size:15px;
color:#9aa7ff;
text-decoration:none;
border-bottom:1px solid rgba(255,255,255,0.2);
padding-bottom:4px;
transition:.3s;
}

.scroll-link:hover{
color:white;
}

/* BACKGROUND BLOBS */

.blob{
position:absolute;
border-radius:50%;
filter:blur(60px);
opacity:.5;
pointer-events:none;
}

.blob1{
width:400px;
height:400px;
background:linear-gradient(45deg,#5a6cff,#9a6cff);
right:20%;
top:30%;
}

.blob2{
width:300px;
height:300px;
background:linear-gradient(45deg,#7a5cff,#3bd6ff);
right:5%;
bottom:10%;
}

/* FLOATING BACK TO HERO INDICATOR */

.back-to-hero{
position:fixed;
right:26px;
bottom:26px;
width:48px;
height:48px;
display:grid;
place-items:center;
border-radius:999px;
border:1px solid rgba(154,108,255,0.55);
background:linear-gradient(145deg, rgba(20,20,28,0.92), rgba(38,28,66,0.92));
color:#d5dcff;
font-size:20px;
line-height:1;
box-shadow:0 10px 28px rgba(0,0,0,0.42), 0 0 0 1px rgba(255,255,255,0.03) inset;
backdrop-filter:blur(10px);
cursor:pointer;
opacity:0;
visibility:hidden;
transform:translateY(16px) scale(.92);
transition:opacity .28s ease, transform .28s ease, border-color .28s ease, box-shadow .28s ease;
z-index:30;
animation:backToHeroBounce 2.4s ease-in-out infinite;
}

.back-to-hero.is-visible{
opacity:1;
visibility:visible;
transform:translateY(0) scale(1);
}

.back-to-hero:hover{
border-color:rgba(154,108,255,0.9);
box-shadow:0 16px 34px rgba(0,0,0,0.5), 0 0 18px rgba(122,92,255,0.35);
}

.back-to-hero:focus-visible{
outline:2px solid rgba(179,188,255,0.95);
outline-offset:3px;
}

@keyframes backToHeroBounce{
0%, 100%{ transform:translateY(0) scale(1); }
50%{ transform:translateY(-5px) scale(1); }
}

.back-to-hero:not(.is-visible){
animation-play-state:paused;
}

@media (max-width:700px){
.back-to-hero{
right:16px;
bottom:16px;
width:44px;
height:44px;
font-size:18px;
}
}

/* SECOND SECTION */

.section{
min-height:100vh;
padding:120px 10vw;
background:#0b0b0b;
}

.section h2{
font-size:42px;
margin-bottom:20px;
}

.section p{
max-width:600px;
line-height:1.8;
color:#bbb;
}


/* PRICING SECTION - SCI-FI PURPLE BACKGROUND */

#pricing{
background:linear-gradient(180deg,
	#060608 0%,
	#0b0b11 16%,
	#131022 34%,
	#1a1530 50%,
	#191b2d 66%,
	#121722 82%,
	#090d12 100%);
position:relative;
overflow:hidden;
}

#pricing::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(circle at 18% 42%, rgba(122, 88, 190, 0.09) 0%, transparent 56%),
						radial-gradient(circle at 76% 68%, rgba(70, 88, 156, 0.08) 0%, transparent 60%),
						radial-gradient(circle at 52% 20%, rgba(104, 78, 164, 0.06) 0%, transparent 64%);
animation:pulseGlow 18s ease-in-out infinite;
pointer-events:none;
}

#pricing::after{
content:"";
position:absolute;
inset:0;
background-image:
	radial-gradient(2px 2px at 20px 30px, rgba(200, 150, 255, 0.8), transparent),
	radial-gradient(2px 2px at 60px 70px, rgba(200, 150, 255, 0.5), transparent),
	radial-gradient(1px 1px at 50px 50px, rgba(200, 150, 255, 0.7), transparent),
	radial-gradient(1px 1px at 130px 80px, rgba(200, 150, 255, 0.6), transparent),
	radial-gradient(2px 2px at 90px 10px, rgba(200, 150, 255, 0.9), transparent);
background-size:200px 200px;
background-position:0 0;
animation:sparkleFloat 20s linear infinite;
pointer-events:none;
}

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

@keyframes pulseGlow{
0%, 100%{ opacity:0.55; }
50%{ opacity:0.85; }
}

@keyframes sparkleFloat{
0%{ background-position:0 0; }
100%{ background-position:200px 200px; }
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
margin-top:40px;
}

.pricing-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.08);
border-radius:16px;
padding:28px;
backdrop-filter:blur(10px);
box-shadow:0 20px 40px rgba(0,0,0,0.28);
opacity:0;
transform:translateX(64px);
transition:transform .65s cubic-bezier(.22,.61,.36,1), opacity .65s ease, box-shadow .3s ease, border-color .3s ease;
}

#pricing.pricing-in-view .pricing-card{
opacity:1;
transform:translateX(0);
}

#pricing .pricing-card:nth-child(1){
transition-delay:0s;
}

#pricing .pricing-card:nth-child(2){
transition-delay:.28s;
}

#pricing .pricing-card:nth-child(3){
transition-delay:.56s;
}

.pricing-card:hover{
transform:translateY(-10px);
box-shadow:0 28px 56px rgba(0,0,0,0.38);
border-color:rgba(154,108,255,0.45);
}

.pricing-card h3{
font-size:26px;
margin-bottom:8px;
}

.price-tag{
display:block;
font-size:28px;
font-weight:800;
margin-bottom:16px;
}

.pricing-card ul{
list-style:none;
}

.pricing-card li{
color:#bbb;
line-height:1.8;
font-size:14px;
}

.pricing-card li::before{
content:"+";
color:#9aa7ff;
margin-right:8px;
}

@media (prefers-reduced-motion:reduce){
#pricing .pricing-card,
#pricing.pricing-in-view .pricing-card{
transition:none;
transform:none;
opacity:1;
}

.back-to-hero,
.back-to-hero.is-visible{
animation:none;
transition:none;
transform:none;
}
}

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

/* CONTACT SECTION */

.contact-section{
background:#080808;
position:relative;
overflow:hidden;
isolation:isolate;
}

.contact-form{
margin-top:40px;
max-width:640px;
display:flex;
flex-direction:column;
gap:24px;
}

.form-group{
display:flex;
flex-direction:column;
gap:8px;
}
.contact-section::before{
	content:"";
	position:absolute;
	inset:0;
	background-image:url("img_assets/contact_bg1.png");
	background-repeat:no-repeat;
	background-position:center;
	background-size:cover;
	opacity:.5;
	pointer-events:none;
	z-index:0;
}

@media (max-width:768px){
	.contact-section::before{
		background-size:950px auto;
		background-position:center center;
	}
}

.contact-section > *{
	position:relative;
	z-index:1;
}

.form-group label{
font-size:13px;
color:#aaa;
letter-spacing:.5px;
display:flex;
justify-content:space-between;
align-items:center;
}

.word-counter{
font-size:12px;
color:#777;
transition:color .2s;
}

.form-group input,
.form-group textarea{
background:rgba(255,255,255,0.04);
border:1px solid rgba(255,255,255,0.1);
border-radius:10px;
padding:14px 16px;
color:white;
font-family:'Inter',sans-serif;
font-size:14px;
outline:none;
transition:border-color .25s, background .25s;
resize:vertical;
}

.form-group input::placeholder,
.form-group textarea::placeholder{
color:#555;
}

.form-group input:focus,
.form-group textarea:focus{
border-color:rgba(154,108,255,0.6);
background:rgba(255,255,255,0.07);
}

.field-error{
display:none;
font-size:12px;
color:#ff6b6b;
margin-top:2px;
}

.send-btn{
align-self:flex-start;
padding:14px 36px;
background:linear-gradient(135deg,#5a6cff,#9a6cff);
border:none;
border-radius:10px;
color:white;
font-family:'Inter',sans-serif;
font-size:14px;
font-weight:600;
cursor:pointer;
transition:opacity .25s, transform .2s;
}

.send-btn:disabled{
opacity:.65;
cursor:wait;
transform:none;
}

.send-btn:hover{
opacity:.85;
transform:translateY(-2px);
}

.form-success{
display:none;
font-size:14px;
color:#7dffb3;
}

.form-error-banner{
display:none;
font-size:14px;
color:#ff8d8d;
}

/* BOTTOM-LEFT LEAF INFO PANEL */

.leaf-panel{
position:fixed;
left:16px;
bottom:16px;
display:flex;
align-items:center;
gap:0;
max-width:52px;
height:78px;
padding:0;
border:1px solid rgba(255,255,255,0.15);
border-radius:999px;
background:linear-gradient(140deg, rgba(20, 20, 28, 0.96), rgba(11, 11, 14, 0.96));
backdrop-filter:blur(10px);
box-shadow:0 10px 30px rgba(0,0,0,0.38);
overflow:hidden;
z-index:35;
transition:max-width .42s cubic-bezier(.22,.61,.36,1), border-radius .42s ease, box-shadow .3s ease;
}

.leaf-panel:hover,
.leaf-panel:focus-within{
max-width:min(92vw, 680px);
border-radius:18px;
box-shadow:0 16px 38px rgba(0,0,0,0.48);
}

.leaf-logo{
width:52px;
min-width:52px;
height:52px;
display:grid;
place-items:center;
font-size:26px;
font-weight:700;
color:#d6deff;
}

.leaf-content{
display:flex;
flex-direction:column;
justify-content:center;
gap:5px;
padding-right:18px;
opacity:0;
transform:translateX(10px);
transition:opacity .26s ease .1s, transform .26s ease .1s;
white-space:nowrap;
}

.leaf-panel:hover .leaf-content,
.leaf-panel:focus-within .leaf-content{
opacity:1;
transform:translateX(0);
}

.leaf-content p{
margin:0;
font-size:12px;
line-height:1.35;
color:#d0d0d0;
}

.leaf-content a{
color:#b4c2ff;
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:2px;
}

.leaf-content a:hover,
.leaf-content a:focus-visible{
color:#ffffff;
}

/* CENTERED PRIVACY MODAL */

.privacy-modal{
position:fixed;
inset:0;
display:grid;
place-items:center;
padding:16px;
background:rgba(4,4,6,0.62);
backdrop-filter:blur(3px);
opacity:0;
visibility:hidden;
pointer-events:none;
transition:opacity .25s ease, visibility .25s ease;
z-index:50;
}

.privacy-modal.is-open{
opacity:1;
visibility:visible;
pointer-events:auto;
}

.privacy-modal-card{
position:relative;
width:min(94vw, 520px);
max-height:min(82vh, 760px);
overflow-y:auto;
overscroll-behavior:contain;
padding:26px 24px;
border-radius:14px;
border:1px solid rgba(255,255,255,0.16);
background:linear-gradient(160deg, rgba(16,16,23,0.97), rgba(9,9,12,0.97));
box-shadow:0 20px 48px rgba(0,0,0,0.5);
transform:translateY(10px) scale(.98);
transition:transform .26s cubic-bezier(.22,.61,.36,1);
}

.privacy-modal.is-open .privacy-modal-card{
transform:translateY(0) scale(1);
}

.privacy-modal-card h3{
margin:0 0 12px;
font-size:16px;
}

.privacy-modal-card p{
margin:0;
font-size:12px;
line-height:1.7;
color:#c8c8c8;
}

.privacy-modal-card ul{
margin:6px 0 10px;
padding-left:18px;
list-style:disc;
}

.privacy-modal-card li{
font-size:12px;
line-height:1.7;
color:#c8c8c8;
}

.privacy-modal-close{
position:absolute;
top:10px;
right:10px;
width:34px;
height:34px;
border:none;
border-radius:999px;
background:rgba(255,255,255,0.08);
color:#f0f0f0;
font-size:22px;
line-height:1;
cursor:pointer;
}

.privacy-modal-close:hover{
background:rgba(255,255,255,0.15);
}

@media (max-width:700px){
.leaf-panel{
left:12px;
bottom:12px;
}

.leaf-panel:hover,
.leaf-panel:focus-within{
max-width:min(94vw, 560px);
}

.leaf-content p{
font-size:11px;
}
}

/* =============================================
   PROJECTS SECTION
   ============================================= */

#projects{
min-height:auto;
padding:72px 8vw 64px;
background:#0a0a0a;
overflow:hidden;
}

.projects-stage{
display:flex;
align-items:center;
gap:clamp(20px,4vw,52px);
margin-top:40px;
}

/* Info column */

.projects-info{
flex:0 0 240px;
display:flex;
flex-direction:column;
gap:10px;
transition:opacity 0.22s ease;
}

.projects-info.is-fading{
opacity:0;
}

.projects-count{
display:inline-block;
font-size:11px;
letter-spacing:2.5px;
color:#9aa7ff;
font-weight:600;
text-transform:uppercase;
}

.projects-title{
font-size:clamp(18px,2vw,24px);
font-weight:700;
line-height:1.25;
margin:0;
}

.projects-info p{
font-size:13px;
color:#999;
line-height:1.65;
max-width:240px;
margin:0;
}

.projects-dots{
display:flex;
gap:8px;
margin-top:8px;
padding:0;
}

.proj-dot{
width:6px;
height:6px;
border-radius:50%;
background:rgba(255,255,255,0.18);
border:none;
cursor:pointer;
padding:0;
transition:background 0.3s ease, transform 0.3s ease;
}

.proj-dot.active{
background:#9aa7ff;
transform:scale(1.5);
}

/* Carousel column */

.projects-carousel-wrap{
flex:1;
overflow:hidden;
position:relative;
padding:14px 0;
}

.projects-track{
display:flex;
gap:18px;
will-change:transform;
}

.project-slide{
flex:0 0 clamp(280px, 75vw, 960px);
aspect-ratio:16 / 10;
display:flex;
align-items:center;
justify-content:center;
background:rgba(255,255,255,0.03);
border-radius:10px;
overflow:hidden;
opacity:0.22;
transform:scale(0.87);
filter:brightness(0.5);
transition:opacity 0.45s ease, transform 0.45s ease, filter 0.45s ease;
user-select:none;
}

.project-slide.active{
opacity:1;
transform:scale(1);
filter:brightness(1);
}

.project-slide img{
width:100%;
height:100%;
object-fit:contain;
object-position:center center;
display:block;
pointer-events:none;
user-select:none;
}

.proj-btn{
position:absolute;
top:50%;
transform:translateY(-50%);
width:36px;
height:36px;
display:grid;
place-items:center;
border-radius:50%;
border:1px solid rgba(255,255,255,0.12);
background:rgba(8,8,10,0.85);
color:#d5dcff;
font-size:24px;
cursor:pointer;
backdrop-filter:blur(6px);
transition:border-color 0.25s, box-shadow 0.25s;
z-index:4;
line-height:1;
padding:0;
}

.proj-btn:hover{
border-color:rgba(154,108,255,0.7);
box-shadow:0 0 14px rgba(122,92,255,0.28);
}

.proj-btn:focus-visible{
outline:2px solid rgba(179,188,255,0.9);
outline-offset:3px;
}

.proj-prev{left:4px;}
.proj-next{right:4px;}

@media(max-width:700px){
#projects{
padding:56px 5vw 44px;
}

.projects-stage{
flex-direction:column;
align-items:flex-start;
gap:20px;
}

.projects-info{
flex:none;
width:100%;
}

.projects-carousel-wrap{
width:100%;
}

.project-slide{
flex:0 0 75vw;
}
}

@media(prefers-reduced-motion:reduce){
.project-slide,
.project-slide.active{
transition:none;
}

.projects-info{
transition:none;
}

.proj-dot{
transition:none;
}
}