/* =========================

VIDHWAAN GROUP

Global Technology Company

main.css

PART-1

========================= */



:root{

--bg:#050816;

--bg2:#0b1120;

--card:#0f172a;

--card2:#111c31;

--text:#ffffff;

--muted:#94a3b8;

--line:rgba(255,255,255,0.08);

--primary:#3b82f6;

--primary2:#60a5fa;

--success:#22c55e;

--shadow:

0 20px 60px

rgba(0,0,0,.35);




--container:

1280px;



--radius-sm:

14px;



--radius:

24px;



--radius-lg:

36px;



--transition:

all .3s ease;



--section:

140px;

}





*{

margin:0;

padding:0;

box-sizing:border-box;

}





html{

scroll-behavior:smooth;

}





body{

font-family:

Inter,

Segoe UI,

Roboto,

Arial,

sans-serif;



background:

var(--bg);



color:

var(--text);



overflow-x:hidden;



line-height:

1.7;



position:relative;

}





body::before{

content:"";

position:fixed;

top:0;

left:0;

width:100%;

height:100%;



background:

radial-gradient(

circle at top left,

rgba(59,130,246,.10),

transparent 40%

),

radial-gradient(

circle at bottom right,

rgba(96,165,250,.08),

transparent 35%

);



pointer-events:none;

z-index:-3;

}





a{

text-decoration:none;

color:inherit;

}





img{

display:block;

max-width:100%;

}





ul{

list-style:none;

}





.container{

width:

min(

var(--container),

92%

);

margin:auto;

}





section{

position:relative;

padding:

var(--section)

0;

}





h1{

font-size:

clamp(

2.8rem,

5.5vw,

5rem

);

line-height:

0.95;

font-weight:

800;

letter-spacing:

-2px;

}





h2{

font-size:

clamp(

2rem,

5vw,

4rem

);



line-height:

1.15;



font-weight:

800;



letter-spacing:

-1.5px;

}





h3{

font-size:

clamp(

1.2rem,

3vw,

1.7rem

);



font-weight:

700;

}





p{

font-size:

1.05rem;



color:

var(--muted);

}





.section-header{

max-width:

850px;



margin:

0 auto 80px;



text-align:center;

}





.section-header h2{

margin-bottom:

25px;

}





.section-header p{

font-size:

1.15rem;

}





.section-tag{

display:inline-flex;

align-items:center;

justify-content:center;



padding:

10px 22px;



border:

1px solid

var(--line);



border-radius:

999px;



background:

rgba(

255,

255,

255,

0.04

);



font-size:

0.78rem;



font-weight:

700;



letter-spacing:

2px;



text-transform:

uppercase;



margin-bottom:

28px;



backdrop-filter:

blur(16px);

}





.primary-btn{

display:inline-flex;

align-items:center;

justify-content:center;



padding:

18px 34px;



border-radius:

999px;



background:

linear-gradient(

135deg,

var(--primary),

var(--primary2)

);



color:

#fff;



font-weight:

700;



transition:

var(--transition);



box-shadow:

0 10px 40px

rgba(

59,

130,

246,

0.35

);

}





.primary-btn:hover{

transform:

translateY(-3px);

}





.secondary-btn{

display:inline-flex;

align-items:center;

justify-content:center;



padding:

18px 34px;



border-radius:

999px;



border:

1px solid

var(--line);



background:

rgba(

255,

255,

255,

0.03

);



backdrop-filter:

blur(

20px

);



font-weight:

700;



transition:

var(--transition);

}





.secondary-btn:hover{

transform:

translateY(-3px);



border-color:

rgba(

255,

255,

255,

0.18

);

}





.bg-grid{

position:fixed;

inset:0;



background:

linear-gradient(

rgba(

255,

255,

255,

0.02

)

1px,

transparent 1px

),

linear-gradient(

90deg,

rgba(

255,

255,

255,

0.02

)

1px,

transparent 1px

);



background-size:

80px 80px;



opacity:

0.08;



z-index:-4;

}




.bg-blur{

position:fixed;

border-radius:50%;

filter:

blur(

120px

);



z-index:-3;

}





.blur-1{

top:-180px;

left:-150px;



width:

500px;

height:

500px;



background:

rgba(

59,

130,

246,

0.18

);

}





.blur-2{

right:-200px;

bottom:-150px;



width:

550px;

height:

550px;



background:

rgba(

96,

165,

250,

0.12

);

}





.card{

background:

rgba(

255,

255,

255,

0.03

);



border:

1px solid

var(--line);



border-radius:

var(--radius);



backdrop-filter:

blur(

22px

);



box-shadow:

var(--shadow);

}





.footer-divider{

height:1px;



background:

linear-gradient(

to right,

transparent,

rgba(

255,

255,

255,

0.12

),

transparent

);



margin:

60px 0;

}





@media(

max-width:992px

){

:root{

--section:

110px;

}

}





@media(

max-width:768px

){

:root{

--section:

90px;

}



.container{

width:94%;

}



h1{

letter-spacing:

-1px;

}



h2{

letter-spacing:

-0.5px;

}



.section-header{

margin-bottom:

55px;

}



.primary-btn,

.secondary-btn{

width:100%;

}


}


/* =========================

NAVBAR

========================= */

.navbar{

position:fixed;

top:0;

left:0;

width:100%;

z-index:1000;



background:

rgba(

5,

8,

22,

0.65

);



backdrop-filter:

blur(

24px

);



border-bottom:

1px solid

rgba(

255,

255,

255,

0.05

);

}



.navbar .container{

height:84px;



display:flex;

align-items:center;

justify-content:space-between;

}



.logo{

display:flex;

align-items:center;

gap:14px;

}



.logo img{

width:42px;

height:42px;

object-fit:contain;

}



.logo span{

font-size:1.3rem;

font-weight:800;

letter-spacing:1px;

}



.nav-links{

display:flex;

align-items:center;

gap:36px;

}



.nav-links a{

color:

var(--muted);



font-size:

0.95rem;



font-weight:

600;



transition:

var(--transition);

}



.nav-links a:hover{

color:

#fff;

}



.nav-btn{

padding:

14px 28px;



border-radius:

999px;



background:

rgba(

255,

255,

255,

0.05

);



border:

1px solid

var(--line);



font-weight:

700;



transition:

var(--transition);

}



.nav-btn:hover{

transform:

translateY(-2px);



background:

rgba(

255,

255,

255,

0.08

);

}





/* =========================

HERO

========================= */

.hero{

min-height:

100vh;



display:flex;

align-items:flex-start;

justify-content:center;



padding-top:

170px;



padding-bottom:

100px;

}




.hero-logo{

display:flex;

justify-content:center;



margin-bottom:

55px;

}





.hero-logo img{

width:

130px;



height:

130px;



object-fit:

contain;



filter:

drop-shadow(

0 15px 50px

rgba(

255,

193,

7,

0.28

)

);



transition:

all .4s ease;

}





.hero-logo img:hover{

transform:

scale(

1.05

);

}




.hero-container{

text-align:center;

max-width:

1100px;

}




.hero-top-tag{

display:inline-flex;



padding:

16px 34px;



border-radius:

999px;



background:

rgba(

255,

255,

255,

0.03

);



border:

1px solid

rgba(

255,

255,

255,

0.08

);



font-size:

0.78rem;



font-weight:

700;



letter-spacing:

4px;



text-transform:

uppercase;



color:

#cbd5e1;



margin-bottom:

45px;

}




.hero h1{

font-size:

clamp(

2.8rem,

5.5vw,

5rem

);

line-height:

0.95;

letter-spacing:

-2px;

max-width:

800px;

margin:

0 auto;

}



.hero-description{

max-width:

820px;



margin:

40px auto;



font-size:

1.25rem;



line-height:

1.9;

}





.hero-badges{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:14px;



margin-top:

45px;

}



.hero-badges span{

padding:

14px 22px;



background:

rgba(

255,

255,

255,

0.04

);



border:

1px solid

var(--line);



border-radius:

999px;



font-size:

0.95rem;



font-weight:

600;



backdrop-filter:

blur(

20px

);

}





.hero-buttons{

display:flex;

justify-content:center;

gap:22px;



margin-top:

50px;

}





.hero-stats{

display:grid;

grid-template-columns:

repeat(

4,

1fr

);



gap:

24px;



margin-top:

90px;

}





.hero-stat{

padding:

35px;



background:

rgba(

255,

255,

255,

0.03

);



border:

1px solid

var(--line);



border-radius:

28px;



backdrop-filter:

blur(

22px

);



transition:

var(--transition);

}



.hero-stat:hover{

transform:

translateY(-8px);

}



.hero-stat h3{

font-size:

2rem;



margin-bottom:

10px;

}



.hero-stat p{

font-size:

1rem;

}





/* =========================

ECOSYSTEM

========================= */

.ecosystem{

padding-top:

120px;

}



.ecosystem-grid{

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(

320px,

1fr

)

);



gap:

35px;

}





.eco-card{

padding:

42px;



background:

rgba(

255,

255,

255,

0.03

);



border:

1px solid

var(--line);



border-radius:

32px;



backdrop-filter:

blur(

24px

);



transition:

var(--transition);

}



.eco-card:hover{

transform:

translateY(-10px);



border-color:

rgba(

255,

255,

255,

0.12

);

}



.eco-icon{

width:

70px;



height:

70px;



display:flex;

align-items:center;

justify-content:center;



border-radius:

20px;



background:

linear-gradient(

135deg,

var(--primary),

var(--primary2)

);



font-size:

1.2rem;



font-weight:

800;



margin-bottom:

28px;

}



.eco-card h3{

margin-bottom:

20px;

}



.eco-card p{

margin-bottom:

28px;

}



.eco-card ul{

display:flex;

flex-direction:column;

gap:14px;

}



.eco-card li{

position:relative;

padding-left:

22px;



color:

var(--muted);

}



.eco-card li::before{

content:"";



position:absolute;

left:0;

top:11px;



width:

8px;

height:

8px;



border-radius:

50%;



background:

var(--primary);

}





/* =========================

RESPONSIVE

========================= */

@media(

max-width:992px

){

.nav-links{

display:none;

}



.hero-stats{

grid-template-columns:

repeat(

2,

1fr

);

}



.hero-buttons{

flex-direction:column;

}



}



@media(

max-width:768px

){

.hero{

padding-top:

140px;

}



.hero-description{

font-size:

1.08rem;

}



.hero-stats{

grid-template-columns:

1fr;

}



.hero-badges{

gap:10px;

}



.hero-badges span{

width:100%;

}



.ecosystem-grid{

grid-template-columns:

1fr;

}



.eco-card{

padding:

32px;

}



}


/* =========================

TECHNOLOGY

========================= */

.technology-grid{

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(

330px,

1fr

)

);

gap:

35px;

}



.tech-card{

padding:

42px;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

32px;

backdrop-filter:

blur(

24px

);

transition:

var(--transition);

}



.tech-card:hover{

transform:

translateY(-10px);

}



.tech-number{

font-size:

3rem;

font-weight:

800;

opacity:.12;

margin-bottom:

22px;

}



.tech-card h3{

margin-bottom:

20px;

}



.tech-card p{

margin-bottom:

28px;

}



.tech-tags{

display:flex;

flex-wrap:wrap;

gap:12px;

}



.tech-tags span{

padding:

10px 18px;

border-radius:

999px;

background:

rgba(

255,

255,

255,

0.05

);

border:

1px solid

var(--line);

font-size:

0.9rem;

}



.technology-quote{

margin-top:

90px;

text-align:center;

max-width:

850px;

margin-inline:auto;

}



.technology-quote h3{

font-size:

2.5rem;

margin-bottom:

25px;

}





/* =========================

MISSION

========================= */

.mission-grid{

display:grid;

grid-template-columns:

repeat(

2,

1fr

);

gap:

40px;

}



.mission-card{

padding:

45px;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

32px;

}



.mission-icon{

width:

70px;

height:

70px;

display:flex;

align-items:center;

justify-content:center;

border-radius:

20px;

background:

linear-gradient(

135deg,

var(--primary),

var(--primary2)

);

font-size:

1.5rem;

font-weight:

800;

margin-bottom:

28px;

}



.mission-card h3{

margin-bottom:

24px;

}



.mission-card p{

margin-bottom:

22px;

}



.principles{

margin-top:

120px;

text-align:center;

}



.principles h2{

margin-bottom:

70px;

}



.principles-grid{

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(

240px,

1fr

)

);

gap:

28px;

}



.principle-card{

padding:

38px;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

28px;

}



.principle-card h3{

font-size:

2rem;

opacity:.15;

margin-bottom:

18px;

}



.principle-card h4{

margin-bottom:

18px;

}



.mission-banner{

margin-top:

100px;

padding:

80px;

text-align:center;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

36px;

}



.mission-banner h2{

margin-bottom:

30px;

}





/* =========================

FOUNDER

========================= */

.founder-content{

display:grid;

grid-template-columns:

1.1fr 1fr;

gap:

70px;

margin-top:

70px;

}



.founder-role{

margin:

20px 0;

}



.dot{

margin:

0 14px;

opacity:.5;

}



.founder-left p{

margin-bottom:

28px;

font-size:

1.08rem;

}



.founder-right{

display:grid;

gap:

28px;

}



.founder-card{

padding:

35px;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

28px;

}



.founder-card-number{

font-size:

2.5rem;

font-weight:

800;

opacity:.12;

margin-bottom:

20px;

}



.founder-card h3{

margin-bottom:

16px;

}



.founder-quote{

margin-top:

90px;

text-align:center;

}



.founder-quote h2{

margin-bottom:

25px;

}



@media(max-width:768px){

.founder .container{

padding-left:28px;

padding-right:28px;

}



.founder-content{

gap:50px;

}



.founder-left{

width:100%;

}



.founder-left p{

font-size:1.08rem;

line-height:1.95;

text-align:left;

word-break:normal;

}



.founder-role{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:10px;

}





}



/* =========================

IMPACT

========================= */

.impact-grid{

display:grid;

grid-template-columns:

repeat(

auto-fit,

minmax(

300px,

1fr

)

);

gap:

32px;

}



.impact-card{

padding:

40px;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

30px;

}



.impact-number{

font-size:

3rem;

font-weight:

800;

opacity:.12;

margin-bottom:

20px;

}



.impact-card h3{

margin-bottom:

18px;

}





/* =========================

RESEARCH

========================= */

.research{

padding-top:

100px;

}



.research-box{

padding:

80px;

text-align:center;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

40px;

}



.research-box h2{

margin-bottom:

28px;

}



.research-tags{

display:flex;

flex-wrap:wrap;

justify-content:center;

gap:

14px;

margin-top:

45px;

}



.research-tags span{

padding:

12px 22px;

border-radius:

999px;

border:

1px solid

var(--line);

background:

rgba(

255,

255,

255,

0.04

);

}





/* =========================

ROADMAP

========================= */

.roadmap{

padding-top:

100px;

}



.roadmap-timeline{

display:flex;

align-items:center;

justify-content:center;

gap:

24px;

flex-wrap:wrap;

margin-top:

80px;

}



.timeline-item{

width:

260px;

padding:

36px;

text-align:center;

background:

rgba(

255,

255,

255,

0.03

);

border:

1px solid

var(--line);

border-radius:

28px;

}



.timeline-year{

font-size:

0.9rem;

letter-spacing:

2px;

text-transform:

uppercase;

margin-bottom:

22px;

color:

var(--primary2);

}



.timeline-arrow{

font-size:

2rem;

opacity:.3;

}



.impact-quote{

margin-top:

100px;

text-align:center;

}



.impact-quote h2{

margin-bottom:

25px;

}





/* =========================

FOOTER

========================= */

.footer{

padding:

120px 0 70px;

}



.footer-top{

display:grid;

grid-template-columns:

2fr 1fr 1fr 1fr;

gap:

50px;

}



.footer-logo{

display:flex;

align-items:center;

gap:

16px;

margin-bottom:

28px;

}



.footer-logo img{

width:

48px;

}



.footer-company h2{

margin-bottom:

15px;

}



.footer-company h3{

margin-bottom:

22px;

}



.footer-company p{

margin-bottom:

20px;

}



.footer-links{

display:flex;

flex-direction:column;

gap:

18px;

}



.footer-links h3{

margin-bottom:

18px;

}



.footer-links a{

color:

var(--muted);

transition:

var(--transition);

}



.footer-links a:hover{

color:

#fff;

}



.footer-bottom{

display:flex;

justify-content:space-between;

gap:

20px;

}



.footer-final-text{

margin-top:

40px;

text-align:center;

}



.footer-final-text p{

margin-bottom:

20px;

}





/* =========================

RESPONSIVE

========================= */

@media(

max-width:992px

){

.mission-grid,

.founder-content,

.footer-top{

grid-template-columns:

1fr;

}



.mission-banner,

.research-box{

padding:

50px;

}



.footer-bottom{

flex-direction:column;

text-align:center;

}

}



@media(

max-width:768px

){

.tech-card,

.mission-card,

.impact-card,

.timeline-item{

padding:

32px;

}



.research-box,

.mission-banner{

padding:

35px;

}



.roadmap-timeline{

flex-direction:column;

}



.timeline-arrow{

transform:

rotate(

90deg

);

}



.footer{

text-align:center;

}



.footer-logo{

justify-content:center;

}

}



.global-apps{

padding-top:

140px;

}



.apps-grid{

display:grid;



grid-template-columns:

repeat(

auto-fit,

minmax(

320px,

1fr

)

);



gap:

40px;

}



.app-card{

position:relative;



display:block;



padding:

40px;



text-decoration:none;



background:

rgba(

255,

255,

255,

0.03

);



border:

1px solid

rgba(

255,

255,

255,

0.08

);



border-radius:

32px;



backdrop-filter:

blur(

20px

);



transition:

all .35s ease;

}



.app-card:hover{

transform:

translateY(

-10px

);



border-color:

rgba(

255,

255,

255,

0.16

);

}



.app-icon{

width:

72px;



height:

72px;



display:flex;

align-items:center;

justify-content:center;



border-radius:

22px;



background:

linear-gradient(

135deg,

#3b82f6,

#60a5fa

);



font-size:

1rem;



font-weight:

800;



margin-bottom:

25px;

}



.app-status{

position:absolute;

top:

40px;



right:

40px;



padding:

8px 16px;



border-radius:

999px;



background:

rgba(

34,

197,

94,

0.15

);



color:

#22c55e;



font-size:

0.8rem;



font-weight:

700;

}



.app-card h3{

font-size:

2rem;



margin-bottom:

14px;

}



.app-card h4{

color:

#60a5fa;



margin-bottom:

20px;

}



.app-card p{

margin-bottom:

35px;

}



.app-link{

font-weight:

700;

color:

#fff;

}



@media(

max-width:768px

){

.apps-grid{

grid-template-columns:

1fr;

}

}