/* ===================================================
GRID4K ENTERPRISE FULL STYLE SHEET
=================================================== */

/* ===================================================
GOOGLE FONT
=================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

/* ===================================================
ROOT VARIABLES
=================================================== */

:root{

--primary:#7b2cff;
--secondary:#2563eb;
--accent:#ff6a00;

--dark:#0f172a;
--light:#ffffff;
--text:#64748b;

--border:rgba(123,44,255,0.08);

--shadow:
0 10px 40px rgba(0,0,0,0.05);

--shadow-hover:
0 20px 60px rgba(123,44,255,0.15);

--gradient:
linear-gradient(
135deg,
#2563eb,
#7b2cff,
#ff6a00
);

}

/* ===================================================
RESET
=================================================== */

*{

margin:0;
padding:0;

box-sizing:border-box;

text-decoration:none;

list-style:none;

scroll-behavior:smooth;

}

html,
body{

overflow-x:hidden;

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

background:#ffffff;

color:var(--dark);

}

/* ===================================================
SCROLLBAR
=================================================== */

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f5f9;

}

::-webkit-scrollbar-thumb{

background:var(--gradient);

border-radius:20px;

}

/* ===================================================
GLOBAL
=================================================== */

img{

max-width:100%;

display:block;

}

section{

position:relative;

}

.container{

width:100%;

max-width:1400px;

margin:auto;

}

.fade-in{

animation:fadeIn 1s ease;

}

/* ===================================================
PRELOADER
=================================================== */

.preloader{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:#ffffff;

z-index:99999;

display:flex;

justify-content:center;
align-items:center;

transition:0.5s;

}

.preloader::before{

content:"";

width:70px;
height:70px;

border-radius:50%;

border:6px solid #e2e8f0;

border-top:6px solid var(--primary);

animation:spin 1s linear infinite;

}

/* ===================================================
HEADER
=================================================== */

.header{

position:fixed;

top:0;
left:0;

width:100%;

padding:20px 6%;

display:flex;

justify-content:space-between;

align-items:center;

z-index:999;

background:
rgba(255,255,255,0.92);

backdrop-filter:blur(16px);

border-bottom:
1px solid rgba(123,44,255,0.06);

transition:0.4s;

}

/* ===================================================
LOGO
=================================================== */

.logo{

display:flex;

align-items:center;

gap:12px;

}

.logo img{

height:60px;

object-fit:contain;

}

/* ===================================================
NAVBAR
=================================================== */

.navbar{

display:flex;

align-items:center;

gap:28px;

}

.navbar a{

position:relative;

font-size:15px;

font-weight:700;

color:var(--dark);

transition:0.3s;

padding:10px 0;

}

.navbar a::after{

content:"";

position:absolute;

left:0;
bottom:0;

width:0%;
height:3px;

border-radius:20px;

background:var(--gradient);

transition:0.4s;

}

.navbar a:hover{

color:var(--primary);

}

.navbar a:hover::after{

width:100%;

}

/* ===================================================
HEADER BUTTON
=================================================== */

.header-btn{

display:inline-flex;

justify-content:center;
align-items:center;

padding:15px 30px;

border-radius:16px;

font-size:15px;

font-weight:700;

background:var(--gradient);

color:#ffffff;

transition:0.4s;

box-shadow:
0 10px 30px rgba(123,44,255,0.18);

}

.header-btn:hover{

transform:translateY(-5px);

}

/* ===================================================
MOBILE BUTTON
=================================================== */

.mobile-menu-btn{

display:none;

width:50px;
height:50px;

border-radius:14px;

background:var(--gradient);

color:#ffffff;

font-size:24px;

cursor:pointer;

justify-content:center;
align-items:center;

}

/* ===================================================
BUTTONS
=================================================== */

.primary-btn,
.secondary-btn{

display:inline-flex;

justify-content:center;
align-items:center;

padding:18px 34px;

border-radius:18px;

font-size:16px;

font-weight:700;

transition:0.4s;

}

.primary-btn{

background:var(--gradient);

color:#ffffff;

box-shadow:
0 10px 30px rgba(123,44,255,0.18);

}

.primary-btn:hover{

transform:translateY(-5px);

}

.secondary-btn{

background:#ffffff;

color:var(--primary);

}

.secondary-btn:hover{

transform:translateY(-5px);

}

/* ===================================================
HERO SECTION
=================================================== */

.hero{

min-height:100vh;

padding:
180px 6% 120px;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

background:

linear-gradient(
180deg,
#ffffff 0%,
#f8fbff 100%
);

}

.hero-content h1{

font-size:78px;

font-weight:900;

line-height:1.1;

margin-bottom:25px;

color:#0f172a;

}

.hero-content h1 span{

background:var(--gradient);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.hero-content p{

font-size:20px;

line-height:1.9;

color:#64748b;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

gap:20px;

margin-bottom:50px;

flex-wrap:wrap;

}

.hero-image{

display:flex;

justify-content:center;

align-items:center;

}

.hero-image img{

width:100%;

max-width:650px;

animation:float 5s ease infinite;

}

.hero-badge{

display:inline-flex;

align-items:center;

padding:12px 20px;

border-radius:50px;

background:
rgba(123,44,255,0.08);

color:#7b2cff;

font-size:15px;

font-weight:700;

margin-bottom:30px;

}

/* ===================================================
HERO STATS
=================================================== */

.hero-stats{

display:flex;

gap:25px;

flex-wrap:wrap;

}

.stat-box{

background:#ffffff;

padding:22px 28px;

border-radius:24px;

box-shadow:var(--shadow);

border:
1px solid rgba(123,44,255,0.08);

min-width:180px;

}

.stat-box h3{

font-size:38px;

font-weight:900;

margin-bottom:8px;

background:var(--gradient);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

}

.stat-box p{

font-size:15px;

color:#64748b;

}

/* ===================================================
SERVICES SECTION
=================================================== */

.services-section{

padding:120px 6%;

background:#ffffff;

}

.section-title{

text-align:center;

margin-bottom:70px;

}

.section-title h2{

font-size:64px;

font-weight:900;

margin-bottom:20px;

color:#0f172a;

}

.section-title p{

font-size:20px;

line-height:1.9;

color:#64748b;

max-width:850px;

margin:auto;

}

.services-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:30px;

}

.service-card{

background:#ffffff;

padding:40px 35px;

border-radius:32px;

border:
1px solid rgba(123,44,255,0.08);

box-shadow:var(--shadow);

transition:0.45s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

.service-icon{

width:75px;
height:75px;

border-radius:22px;

display:flex;

justify-content:center;
align-items:center;

font-size:32px;

margin-bottom:25px;

background:var(--gradient);

color:#ffffff;

}

.service-card h3{

font-size:30px;

margin-bottom:18px;

color:#0f172a;

}

.service-card p{

font-size:16px;

line-height:1.9;

color:#64748b;

}

/* ===================================================
ABOUT SECTION
=================================================== */

.about-section{

padding:120px 6%;

display:grid;

grid-template-columns:1fr 1fr;

align-items:center;

gap:80px;

background:

linear-gradient(
180deg,
#f8fbff 0%,
#ffffff 100%
);

}

.about-image{

display:flex;

justify-content:center;

}

.about-image img{

width:100%;

max-width:650px;

border-radius:35px;

box-shadow:
0 20px 60px rgba(0,0,0,0.08);

}

.about-content h2{

font-size:68px;

font-weight:900;

line-height:1.2;

margin-bottom:25px;

color:#0f172a;

}

.about-content p{

font-size:20px;

line-height:1.9;

color:#64748b;

margin-bottom:40px;

}

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

.cta-section{

padding:120px 6%;

text-align:center;

background:var(--gradient);

color:#ffffff;

}

.cta-section h2{

font-size:64px;

font-weight:900;

margin-bottom:25px;

}

.cta-section p{

font-size:20px;

line-height:1.9;

max-width:900px;

margin:auto;

margin-bottom:40px;

}

/* ===================================================
FOOTER
=================================================== */

.footer{

background:#0f172a;

padding:100px 6% 40px;

color:#ffffff;

}

.footer-grid{

display:grid;

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

gap:50px;

margin-bottom:60px;

}

.footer-logo img{

height:65px;

margin-bottom:22px;

}

.footer h4{

font-size:24px;

margin-bottom:24px;

font-weight:800;

}

.footer p{

font-size:15px;

line-height:1.9;

color:#cbd5e1;

}

.footer ul{

display:flex;

flex-direction:column;

gap:14px;

}

.footer ul li a{

font-size:15px;

color:#cbd5e1;

transition:0.3s;

}

.footer ul li a:hover{

color:#ffffff;

padding-left:6px;

}

.footer-bottom{

padding-top:35px;

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

text-align:center;

}

.footer-bottom p{

font-size:14px;

color:#94a3b8;

}

/* ===================================================
CARD HOVER
=================================================== */

.hover-up{

transition:
transform 0.45s ease,
box-shadow 0.45s ease;

}

.hover-up:hover{

transform:translateY(-10px);

box-shadow:var(--shadow-hover);

}

/* ===================================================
INPUTS
=================================================== */

input,
textarea,
button{

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

}

button{

cursor:pointer;

}

/* ===================================================
ANIMATIONS
=================================================== */

@keyframes fadeIn{

from{

opacity:0;
transform:translateY(20px);

}

to{

opacity:1;
transform:translateY(0);

}

}

@keyframes spin{

0%{

transform:rotate(0deg);

}

100%{

transform:rotate(360deg);

}

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-18px);

}

100%{

transform:translateY(0px);

}

}

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

@media(max-width:1200px){

.hero,
.about-section{

grid-template-columns:1fr;

text-align:center;

}

.hero-buttons,
.hero-stats{

justify-content:center;

}

.services-grid{

grid-template-columns:repeat(2,1fr);

}

}

@media(max-width:992px){

.navbar{

position:fixed;

top:90px;
right:-100%;

width:320px;

height:calc(100vh - 90px);

background:#ffffff;

flex-direction:column;

align-items:flex-start;

padding:40px 30px;

gap:22px;

transition:0.45s ease;

box-shadow:
-10px 0 40px rgba(0,0,0,0.08);

}

.navbar.active{

right:0;

}

.mobile-menu-btn{

display:flex;

}

.header-btn{

display:none;

}

}

@media(max-width:768px){

.hero{

padding:
150px 5% 100px;

}

.hero-content h1{

font-size:48px;

}

.section-title h2,
.about-content h2,
.cta-section h2{

font-size:42px;

}

.services-grid{

grid-template-columns:1fr;

}

.about-section{

padding:100px 5%;

}

.hero-content p,
.about-content p,
.section-title p,
.cta-section p{

font-size:16px;

}

.hero-buttons{

flex-direction:column;

}

.hero-buttons a{

width:100%;

}

.hero-stats{

flex-direction:column;

}

.stat-box{

width:100%;

}

.footer{

padding:80px 5% 35px;

}

.footer-grid{

grid-template-columns:1fr;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:38px;

}

.section-title h2,
.about-content h2,
.cta-section h2{

font-size:34px;

}

}