/* ==========================================
   BOURSINITA
   style.css
   Part 1
========================================== */

:root{

--bg:#050816;

--bg2:#07111f;

--card:rgba(255,255,255,.05);

--cardBorder:rgba(255,255,255,.08);

--text:#ffffff;

--muted:#b8c5d6;

--green:#00F5A0;

--blue:#38BDF8;

--radius:26px;

--shadow:0 0 60px rgba(0,245,160,.18);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Vazirmatn',sans-serif;

background:var(--bg);

color:var(--text);

overflow-x:hidden;

position:relative;

}

a{

text-decoration:none;

color:inherit;

}

canvas{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-3;

}

body::before{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:

radial-gradient(circle at 20% 20%,

rgba(0,245,160,.12),

transparent 28%),

radial-gradient(circle at 80% 15%,

rgba(56,189,248,.10),

transparent 30%),

linear-gradient(180deg,

#07111f,

#050816);

z-index:-2;

}

body::after{

content:"";

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:

linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),

linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);

background-size:48px 48px;

mask-image:linear-gradient(to bottom,

transparent,

rgba(0,0,0,.15),

rgba(0,0,0,.7));

opacity:.35;

transform:perspective(1200px)

rotateX(78deg)

scale(1.8);

transform-origin:bottom;

animation:gridMove 18s linear infinite;

z-index:-1;

}

@keyframes gridMove{

0%{

background-position:0 0;

}

100%{

background-position:0 48px;

}

}

#mouseGlow{

position:fixed;

width:420px;

height:420px;

border-radius:50%;

pointer-events:none;

background:

radial-gradient(circle,

rgba(0,245,160,.16),

transparent 70%);

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

z-index:-1;

filter:blur(40px);

transition:

left .08s linear,

top .08s linear;

}

header{

position:fixed;

top:0;

left:0;

width:100%;

z-index:50;

padding:22px 40px;

backdrop-filter:blur(18px);

background:rgba(5,8,22,.25);

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

}

nav{

max-width:1300px;

margin:auto;

display:flex;

align-items:center;

justify-content:space-between;

}

.brand{

font-size:28px;

font-weight:900;

letter-spacing:-1px;

background:

linear-gradient(90deg,

white,

var(--green));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.status{

padding:10px 18px;

border-radius:999px;

background:rgba(0,245,160,.08);

border:1px solid rgba(0,245,160,.25);

color:var(--green);

font-size:14px;

}

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:140px 24px 80px;

}

.hero-content{

max-width:1050px;

text-align:center;

}

.badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 18px;

border-radius:999px;

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

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

backdrop-filter:blur(14px);

color:var(--green);

margin-bottom:28px;

}

.badge::before{

content:"";

width:8px;

height:8px;

border-radius:50%;

background:var(--green);

box-shadow:

0 0 12px var(--green);

animation:pulse 1.5s infinite;

}

@keyframes pulse{

50%{

transform:scale(1.5);

opacity:.5;

}

}

.hero h1{

font-size:clamp(56px,8vw,110px);

line-height:1.05;

font-weight:900;

letter-spacing:-3px;

margin-bottom:24px;

background:

linear-gradient(90deg,

white,

#9CFAD9,

#59D4FF);

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:22px;

line-height:2;

color:var(--muted);

max-width:850px;

margin:auto;

}
/* ==========================================
   style.css
   Part 2
========================================== */

.hero-buttons{

display:flex;

justify-content:center;

align-items:center;

gap:18px;

margin-top:50px;

flex-wrap:wrap;

}

.hero-buttons a{

padding:16px 34px;

border-radius:18px;

font-weight:700;

transition:.35s;

}

.hero-buttons a:first-child{

background:linear-gradient(135deg,

var(--green),

#00d58d);

color:#02120c;

box-shadow:

0 0 40px rgba(0,245,160,.35);

}

.hero-buttons a:first-child:hover{

transform:translateY(-6px);

box-shadow:

0 20px 50px rgba(0,245,160,.45);

}

.hero-buttons .secondary{

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

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

backdrop-filter:blur(16px);

}

.hero-buttons .secondary:hover{

border-color:var(--blue);

transform:translateY(-6px);

box-shadow:

0 0 35px rgba(56,189,248,.25);

}

section{

position:relative;

padding:120px 24px;

}

section h2{

font-size:48px;

text-align:center;

margin-bottom:70px;

font-weight:900;

}

.cards{

max-width:1300px;

margin:auto;

display:grid;

grid-template-columns:

repeat(auto-fit,minmax(260px,1fr));

gap:28px;

}

.card{

position:relative;

overflow:hidden;

padding:38px;

border-radius:var(--radius);

background:var(--card);

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

backdrop-filter:blur(18px);

transition:.45s;

}

.card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(90deg,

transparent,

rgba(255,255,255,.08),

transparent);

transition:.8s;

}

.card:hover::before{

left:100%;

}

.card:hover{

transform:

translateY(-10px)

scale(1.02);

box-shadow:var(--shadow);

border-color:

rgba(0,245,160,.25);

}

.icon{

width:74px;

height:74px;

display:flex;

align-items:center;

justify-content:center;

border-radius:20px;

margin-bottom:24px;

font-size:30px;

background:

linear-gradient(145deg,

rgba(0,245,160,.18),

rgba(56,189,248,.12));

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

}

.card h3{

font-size:26px;

margin-bottom:14px;

}

.card p{

font-size:17px;

line-height:2;

color:var(--muted);

}

.glass{

max-width:1000px;

margin:auto;

padding:70px;

border-radius:34px;

background:

rgba(255,255,255,.05);

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

backdrop-filter:blur(20px);

position:relative;

overflow:hidden;

}

.glass::after{

content:"";

position:absolute;

right:-140px;

top:-140px;

width:320px;

height:320px;

border-radius:50%;

background:

radial-gradient(circle,

rgba(0,245,160,.20),

transparent);

filter:blur(20px);

}

.glass h2{

margin-bottom:30px;

}

.glass p{

font-size:20px;

line-height:2.2;

color:var(--muted);

text-align:center;

}

footer{

padding:70px 24px;

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:20px;

max-width:1300px;

margin:auto;

color:#8d9caf;

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

}

footer div:last-child{

color:var(--green);

font-weight:600;

}

.reveal{

opacity:0;

transform:translateY(60px);

transition:

opacity .8s,

transform .8s;

}

.reveal.active{

opacity:1;

transform:translateY(0);

}
/* ==========================================
   style.css
   Part 3
========================================== */

/* Scroll Indicator */

.scroll-indicator{

position:absolute;

bottom:40px;

left:50%;

transform:translateX(-50%);

display:flex;

flex-direction:column;

align-items:center;

gap:10px;

color:var(--green);

opacity:.8;

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

}

.scroll-indicator span{

font-size:14px;

letter-spacing:2px;

text-transform:uppercase;

}

.scroll-indicator::after{

content:"";

width:2px;

height:40px;

background:linear-gradient(

to bottom,

var(--green),

transparent

);

}

@keyframes float{

50%{

transform:

translate(-50%,10px);

}

}

/* Glow Border */

.glow{

position:relative;

}

.glow::before{

content:"";

position:absolute;

inset:-1px;

border-radius:inherit;

padding:1px;

background:

linear-gradient(

135deg,

transparent,

rgba(0,245,160,.5),

transparent,

rgba(56,189,248,.4),

transparent

);

-webkit-mask:

linear-gradient(#fff 0 0) content-box,

linear-gradient(#fff 0 0);

-webkit-mask-composite:xor;

mask-composite:exclude;

opacity:.6;

pointer-events:none;

}

/* Hero Animation */

.hero-content>*{

opacity:0;

transform:translateY(40px);

animation:fadeUp .8s forwards;

}

.hero-content>*:nth-child(1){

animation-delay:.15s;

}

.hero-content>*:nth-child(2){

animation-delay:.35s;

}

.hero-content>*:nth-child(3){

animation-delay:.55s;

}

.hero-content>*:nth-child(4){

animation-delay:.75s;

}

@keyframes fadeUp{

to{

opacity:1;

transform:translateY(0);

}

}

/* Neon line */

.neon-line{

width:180px;

height:2px;

margin:35px auto;

background:

linear-gradient(

90deg,

transparent,

var(--green),

transparent

);

box-shadow:

0 0 20px var(--green),

0 0 40px var(--green);

}

/* Selection */

::selection{

background:var(--green);

color:#00120b;

}

/* Scrollbar */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#08111d;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

var(--green),

var(--blue)

);

border-radius:20px;

}

/* Mobile */

@media (max-width:1100px){

.hero h1{

font-size:68px;

}

.hero p{

font-size:19px;

}

.glass{

padding:50px;

}

}

@media (max-width:768px){

header{

padding:18px 20px;

}

.brand{

font-size:24px;

}

.status{

display:none;

}

.hero{

padding-top:120px;

}

.hero h1{

font-size:48px;

letter-spacing:-2px;

}

.hero p{

font-size:17px;

line-height:1.9;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

}

.cards{

grid-template-columns:1fr;

}

.glass{

padding:34px;

border-radius:22px;

}

.glass p{

font-size:17px;

}

section h2{

font-size:36px;

margin-bottom:45px;

}

footer{

justify-content:center;

text-align:center;

}

}

@media (max-width:480px){

.hero h1{

font-size:38px;

}

.hero p{

font-size:16px;

}

.badge{

font-size:13px;

}

.card{

padding:28px;

}

.icon{

width:60px;

height:60px;

font-size:24px;

}

}

/* Performance */

canvas{

will-change:transform;

}

.card,

.glass{

will-change:transform;

}

.hero h1{

text-rendering:optimizeLegibility;

}

img{

max-width:100%;

display:block;

}

body.loaded .hero{

opacity:1;

transition:opacity .6s;

}

.hero{

opacity:0;

}