/*==================================================
  NOVA STUDIO
  Premium Agency UI
==================================================*/

:root{

--bg:#050816;
--bg2:#0c1124;
--card:rgba(255,255,255,.05);

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

--text:#ffffff;

--muted:#9da7c5;

--primary:#6D5DFB;

--secondary:#25C2FF;

--success:#2EE59D;

--radius:22px;

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

--shadow:0 20px 60px rgba(0,0,0,.35);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:var(--bg);

color:var(--text);

overflow-x:hidden;

position:relative;

line-height:1.7;

}

/*============================
Scrollbar
=============================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#090d1f;

}

::-webkit-scrollbar-thumb{

background:linear-gradient(var(--primary),var(--secondary));

border-radius:100px;

}

/*============================
Selection
=============================*/

::selection{

background:var(--primary);

color:white;

}

/*============================
Links
=============================*/

a{

text-decoration:none;

transition:var(--transition);

color:inherit;

}

/*============================
Container
=============================*/

.container{

max-width:1220px;

}

/*============================
Animated Background
=============================*/

body::before{

content:"";

position:fixed;

width:800px;

height:800px;

background:radial-gradient(circle,var(--primary),transparent 70%);

top:-300px;

left:-300px;

opacity:.12;

pointer-events:none;

z-index:-2;

animation:float1 14s infinite linear;

}

body::after{

content:"";

position:fixed;

width:700px;

height:700px;

background:radial-gradient(circle,var(--secondary),transparent 70%);

right:-250px;

bottom:-250px;

opacity:.10;

pointer-events:none;

z-index:-2;

animation:float2 18s infinite linear;

}

/*============================
Grid Background
=============================*/

.bg-grid{

position:fixed;

inset:0;

background-image:

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

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

background-size:50px 50px;

mask-image:radial-gradient(circle,#fff 30%,transparent 100%);

pointer-events:none;

z-index:-3;

}

/*============================
Blur Balls
=============================*/

.blur{

position:fixed;

border-radius:50%;

filter:blur(130px);

pointer-events:none;

z-index:-1;

}

.blur1{

width:320px;

height:320px;

background:#6D5DFB;

top:80px;

left:-120px;

opacity:.25;

}

.blur2{

width:280px;

height:280px;

background:#25C2FF;

right:-80px;

top:300px;

opacity:.20;

}

.blur3{

width:350px;

height:350px;

background:#7B2EFF;

bottom:-140px;

left:35%;

opacity:.18;

}

/*============================
Navbar
=============================*/

.navbar{

padding:18px 0;

transition:.4s;

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

backdrop-filter:blur(20px);

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

}

.navbar-brand{

font-size:30px;

font-weight:800;

letter-spacing:-1px;

color:#fff;

}

.navbar-brand span{

background:linear-gradient(90deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.nav-link{

color:#d9def4;

margin-left:28px;

font-weight:500;

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-8px;

width:0;

height:2px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

transition:.3s;

}

.nav-link:hover{

color:#fff;

}

.nav-link:hover::after{

width:100%;

}

/*============================
Buttons
=============================*/

.btn-gradient{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:100px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

font-weight:700;

box-shadow:0 15px 35px rgba(95,94,251,.35);

transition:.35s;

}

.btn-gradient:hover{

transform:translateY(-4px);

box-shadow:0 25px 55px rgba(95,94,251,.45);

color:#fff;

}

.btn-outline-custom{

display:inline-flex;

align-items:center;

justify-content:center;

padding:15px 34px;

border-radius:100px;

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

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

backdrop-filter:blur(20px);

color:#fff;

margin-left:15px;

transition:.35s;

}

.btn-outline-custom:hover{

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

transform:translateY(-4px);

}

/*============================
Hero
=============================*/

.hero{

padding:180px 0 120px;

position:relative;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

border-radius:100px;

background:rgba(109,93,251,.15);

border:1px solid rgba(109,93,251,.30);

color:#bdb5ff;

margin-bottom:30px;

font-size:14px;

}

.hero h1{

font-size:72px;

line-height:1.05;

font-weight:800;

letter-spacing:-3px;

margin-bottom:25px;

max-width:650px;

}

.hero h1 span{

background:linear-gradient(90deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.hero p{

font-size:20px;

color:var(--muted);

max-width:620px;

margin-bottom:40px;

}

.hero-buttons{

display:flex;

align-items:center;

margin-bottom:60px;

flex-wrap:wrap;

}

.hero-stats{

display:flex;

gap:70px;

}

.hero-stats h3{

font-size:40px;

font-weight:800;

margin-bottom:5px;

}

.hero-stats span{

color:var(--muted);

font-size:15px;

}

/*============================
Floating Animations
=============================*/

@keyframes float1{

0%{transform:translateY(0) rotate(0deg);}
50%{transform:translateY(40px) rotate(180deg);}
100%{transform:translateY(0) rotate(360deg);}

}

@keyframes float2{

0%{transform:translateY(0);}
50%{transform:translateY(-40px);}
100%{transform:translateY(0);}

}


/*==================================================
SECTIONS
==================================================*/

section{

position:relative;

padding:110px 0;

}

.section-heading{

text-align:center;

margin-bottom:70px;

}

.section-heading span{

display:inline-block;

padding:8px 18px;

border-radius:50px;

background:rgba(109,93,251,.12);

border:1px solid rgba(109,93,251,.25);

font-size:13px;

font-weight:700;

letter-spacing:2px;

color:#bdb5ff;

margin-bottom:20px;

text-transform:uppercase;

}

.section-heading h2{

font-size:54px;

font-weight:800;

letter-spacing:-2px;

margin-bottom:20px;

}

.section-heading p{

font-size:18px;

color:var(--muted);

max-width:760px;

margin:auto;

line-height:1.9;

}

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

#services{

padding-top:120px;

}

#services .container{

max-width:1240px;

}

#services .row{

row-gap:28px;

}

.service-card{

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

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

backdrop-filter:blur(18px);

border-radius:26px;

padding:40px;

height:100%;

position:relative;

overflow:hidden;

transition:.35s;

cursor:pointer;

}

.service-card::before{

content:"";

position:absolute;

width:260px;

height:260px;

border-radius:50%;

background:radial-gradient(circle,var(--primary),transparent 70%);

top:-130px;

right:-130px;

opacity:.18;

transition:.45s;

}

.service-card:hover{

transform:translateY(-12px);

border-color:rgba(109,93,251,.45);

box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.service-card:hover::before{

transform:scale(1.5);

opacity:.35;

}

.service-card i{

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

font-size:28px;

border-radius:18px;

margin-bottom:28px;

background:linear-gradient(135deg,var(--primary),var(--secondary));

color:#fff;

box-shadow:0 12px 35px rgba(109,93,251,.35);

}

.service-card h3{

font-size:28px;

font-weight:700;

margin-bottom:16px;

}

.service-card p{

font-size:16px;

color:var(--muted);

line-height:1.9;

}

/*==================================================
WHY US
==================================================*/

#why{

padding:140px 0;

}

#why h2{

font-size:52px;

font-weight:800;

margin-bottom:25px;

letter-spacing:-2px;

}

#why p{

font-size:18px;

color:var(--muted);

margin-bottom:35px;

}

#why ul{

padding:0;

margin:0;

list-style:none;

}

#why li{

padding:18px 22px;

margin-bottom:18px;

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

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

border-radius:18px;

transition:.3s;

}

#why li:hover{

transform:translateX(8px);

border-color:rgba(109,93,251,.35);

}

/*==================================================
PRODUCTS
==================================================*/

.products{

padding-top:120px;

}

.product-card{

position:relative;

height:100%;

padding:42px;

border-radius:28px;

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

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

overflow:hidden;

transition:.35s;

backdrop-filter:blur(20px);

}

.product-card::before{

content:"";

position:absolute;

left:0;

top:0;

height:4px;

width:100%;

background:linear-gradient(90deg,var(--primary),var(--secondary));

transform:scaleX(0);

transform-origin:left;

transition:.35s;

}

.product-card:hover{

transform:translateY(-12px);

border-color:rgba(109,93,251,.45);

box-shadow:0 25px 70px rgba(0,0,0,.35);

}

.product-card:hover::before{

transform:scaleX(1);

}

.package-badge{

display:inline-block;

padding:8px 16px;

border-radius:100px;

font-size:12px;

font-weight:700;

background:rgba(46,229,157,.12);

border:1px solid rgba(46,229,157,.3);

color:#67ffc5;

margin-bottom:25px;

text-transform:uppercase;

letter-spacing:1px;

}

.product-card h3{

font-size:30px;

font-weight:700;

margin-bottom:16px;

}

.product-card h2{

font-size:54px;

font-weight:800;

margin:30px 0;

background:linear-gradient(90deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}

.product-card p{

color:var(--muted);

line-height:1.9;

margin-bottom:25px;

}

.product-card ul{

padding:0;

margin:0 0 35px;

list-style:none;

}

.product-card ul li{

padding:12px 0;

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

color:#d8def8;

}

.product-card ul li:last-child{

border-bottom:none;

}

.product-card ul li::before{

content:"✓";

margin-right:12px;

font-weight:700;

color:var(--success);

}

.featured{

border:1px solid rgba(109,93,251,.5);

transform:scale(1.04);

box-shadow:0 20px 60px rgba(109,93,251,.18);

}

.featured:hover{

transform:scale(1.06) translateY(-8px);

}

/*==================================================
BUTTON INSIDE PRODUCT
==================================================*/

.product-card .btn-gradient{

width:100%;

justify-content:center;

margin-top:auto;

}



/*==================================================
DASHBOARD MOCKUP
==================================================*/

.dashboard-mockup{

max-width:520px;

margin:auto;

padding:25px;

border-radius:28px;

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

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

backdrop-filter:blur(25px);

box-shadow:0 25px 70px rgba(0,0,0,.35);

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

}

.dashboard-header{

display:flex;

gap:10px;

margin-bottom:25px;

}

.dashboard-header span{

width:14px;

height:14px;

border-radius:50%;

}

.dashboard-header span:nth-child(1){

background:#ff5f57;

}

.dashboard-header span:nth-child(2){

background:#febc2e;

}

.dashboard-header span:nth-child(3){

background:#28c840;

}

.dashboard-card{

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

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

padding:22px;

border-radius:18px;

margin-bottom:20px;

}

.dashboard-card h3{

font-size:42px;

font-weight:800;

margin-top:10px;

}

.dashboard-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.dashboard-grid i{

font-size:28px;

margin-bottom:12px;

color:var(--secondary);

}

.progress-line{

margin-top:20px;

height:8px;

border-radius:20px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

animation:loadingBar 4s infinite;

}

@keyframes loadingBar{

0%{width:20%;}

50%{width:80%;}

100%{width:45%;}

}

@keyframes floatDashboard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
PORTFOLIO
==================================================*/

.portfolio{

padding:130px 0;

}

.project-card{

position:relative;

overflow:hidden;

border-radius:28px;

height:420px;

background:linear-gradient(135deg,#12182f,#1d2646);

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

transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-image{

position:absolute;

inset:0;

background:linear-gradient(135deg,#5c48ff,#00bfff);

opacity:.22;

}

.project-content{

position:absolute;

bottom:0;

left:0;

width:100%;

padding:35px;

background:linear-gradient(transparent,#050816);

}

.project-category{

display:inline-block;

padding:6px 14px;

border-radius:50px;

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

font-size:13px;

margin-bottom:18px;

}

.project-content h3{

font-size:30px;

font-weight:700;

margin-bottom:10px;

}

.project-content p{

color:#d0d6f3;

}

/*==================================================
COUNTERS
==================================================*/

.stats{

padding:120px 0;

}

.stat-card{

padding:45px;

text-align:center;

border-radius:25px;

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

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

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card h2{

font-size:56px;

font-weight:800;

background:linear-gradient(90deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:10px;

}

.stat-card p{

color:var(--muted);

}

/*==================================================
MOUSE LIGHT
==================================================*/

.mouse-light{

position:fixed;

width:320px;

height:320px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(109,93,251,.18),
transparent 70%);

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

z-index:-1;

transition:
left .08s linear,
top .08s linear;

}

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

@media(max-width:991px){

.hero{

text-align:center;

padding-top:140px;

}

.hero h1{

font-size:52px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

gap:35px;

flex-wrap:wrap;

}

.dashboard-mockup{

margin-top:60px;

}

.featured{

transform:none;

}

}

@media(max-width:768px){

.section-heading h2{

font-size:36px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.product-card h2{

font-size:42px;

}

.service-card{

padding:30px;

}

}

@media(max-width:576px){

.hero-buttons{

flex-direction:column;

gap:15px;

}

.btn-outline-custom{

margin-left:0;

}

.hero-stats{

flex-direction:column;

gap:25px;

}

}



/*==================================================
DASHBOARD MOCKUP
==================================================*/

.dashboard-mockup{

max-width:520px;

margin:auto;

padding:25px;

border-radius:28px;

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

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

backdrop-filter:blur(25px);

box-shadow:0 25px 70px rgba(0,0,0,.35);

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

}

.dashboard-header{

display:flex;

gap:10px;

margin-bottom:25px;

}

.dashboard-header span{

width:14px;

height:14px;

border-radius:50%;

}

.dashboard-header span:nth-child(1){

background:#ff5f57;

}

.dashboard-header span:nth-child(2){

background:#febc2e;

}

.dashboard-header span:nth-child(3){

background:#28c840;

}

.dashboard-card{

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

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

padding:22px;

border-radius:18px;

margin-bottom:20px;

}

.dashboard-card h3{

font-size:42px;

font-weight:800;

margin-top:10px;

}

.dashboard-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:20px;

}

.dashboard-grid i{

font-size:28px;

margin-bottom:12px;

color:var(--secondary);

}

.progress-line{

margin-top:20px;

height:8px;

border-radius:20px;

background:linear-gradient(90deg,var(--primary),var(--secondary));

animation:loadingBar 4s infinite;

}

@keyframes loadingBar{

0%{width:20%;}

50%{width:80%;}

100%{width:45%;}

}

@keyframes floatDashboard{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-15px);

}

100%{

transform:translateY(0);

}

}

/*==================================================
PORTFOLIO
==================================================*/

.portfolio{

padding:130px 0;

}

.project-card{

position:relative;

overflow:hidden;

border-radius:28px;

height:420px;

background:linear-gradient(135deg,#12182f,#1d2646);

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

transition:.35s;

}

.project-card:hover{

transform:translateY(-10px);

}

.project-image{

position:absolute;

inset:0;

background:linear-gradient(135deg,#5c48ff,#00bfff);

opacity:.22;

}

.project-content{

position:absolute;

bottom:0;

left:0;

width:100%;

padding:35px;

background:linear-gradient(transparent,#050816);

}

.project-category{

display:inline-block;

padding:6px 14px;

border-radius:50px;

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

font-size:13px;

margin-bottom:18px;

}

.project-content h3{

font-size:30px;

font-weight:700;

margin-bottom:10px;

}

.project-content p{

color:#d0d6f3;

}

/*==================================================
COUNTERS
==================================================*/

.stats{

padding:120px 0;

}

.stat-card{

padding:45px;

text-align:center;

border-radius:25px;

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

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

transition:.35s;

}

.stat-card:hover{

transform:translateY(-10px);

}

.stat-card h2{

font-size:56px;

font-weight:800;

background:linear-gradient(90deg,var(--primary),var(--secondary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

margin-bottom:10px;

}

.stat-card p{

color:var(--muted);

}

/*==================================================
MOUSE LIGHT
==================================================*/

.mouse-light{

position:fixed;

width:320px;

height:320px;

border-radius:50%;

pointer-events:none;

background:radial-gradient(circle,
rgba(109,93,251,.18),
transparent 70%);

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

z-index:-1;

transition:
left .08s linear,
top .08s linear;

}

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

@media(max-width:991px){

.hero{

text-align:center;

padding-top:140px;

}

.hero h1{

font-size:52px;

}

.hero-buttons{

justify-content:center;

}

.hero-stats{

justify-content:center;

gap:35px;

flex-wrap:wrap;

}

.dashboard-mockup{

margin-top:60px;

}

.featured{

transform:none;

}

}

@media(max-width:768px){

.section-heading h2{

font-size:36px;

}

.hero h1{

font-size:42px;

}

.hero p{

font-size:17px;

}

.dashboard-grid{

grid-template-columns:1fr;

}

.product-card h2{

font-size:42px;

}

.service-card{

padding:30px;

}

}

@media(max-width:576px){

.hero-buttons{

flex-direction:column;

gap:15px;

}

.btn-outline-custom{

margin-left:0;

}

.hero-stats{

flex-direction:column;

gap:25px;

}

}

.custom-modal{

display:none;

position:fixed;

inset:0;

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

}

.custom-modal.show{

display:flex;

align-items:center;

justify-content:center;

}