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

SAMVET DESIGN SYSTEM 1.0
FRAMEWORK 10
SYMPHONY MOTION

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


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

:root{

--primary:#7C3AED;

--secondary:#00E5FF;

--accent:#FF4D9D;

--success:#00D27A;

--warning:#FFC857;

--danger:#FF5A7A;

--bg:#050816;

--surface:#0D1324;

--card:#111827;

--card2:#172033;

--text:#FFFFFF;

--muted:#AAB4D6;

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

--glass:rgba(255,255,255,.06);

--shadow:

0 20px 60px rgba(0,0,0,.35);

--radius-xs:8px;

--radius-sm:12px;

--radius-md:18px;

--radius-lg:28px;

--radius-xl:40px;

--transition:.35s ease;

}



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

*{

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;

line-height:1.7;

}



/*==========================
TYPOGRAPHY
==========================*/

h1,h2,h3,h4,h5{

font-family:"Syne",sans-serif;

font-weight:700;

line-height:1.1;

}

p{

color:var(--muted);

}



/*==========================
CONTAINER
==========================*/

.container{

width:min(1360px,92%);

margin:auto;

}



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

section{

padding:140px 0;

position:relative;

}



/*==========================
IMAGES
==========================*/

img{

display:block;

max-width:100%;

}



/*==========================
LINK
==========================*/

a{

text-decoration:none;

color:inherit;

}



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

.btn{

display:inline-flex;

align-items:center;

justify-content:center;

padding:18px 38px;

border-radius:100px;

font-weight:600;

transition:var(--transition);

cursor:pointer;

}

.btn-primary{

background:

linear-gradient(

90deg,

var(--primary),

var(--secondary));

color:white;

}

.btn-outline{

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

color:var(--secondary);

}

.btn:hover{

transform:translateY(-4px);

}



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

.card{

background:var(--glass);

backdrop-filter:blur(20px);

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

border-radius:var(--radius-lg);

box-shadow:var(--shadow);

}



/*==========================
GRID
==========================*/

.grid{

display:grid;

gap:30px;

}



/*==========================
FLEX
==========================*/

.flex{

display:flex;

}

.items-center{

align-items:center;

}

.justify-between{

justify-content:space-between;

}

.justify-center{

justify-content:center;

}



/*==========================
SPACING
==========================*/

.mt-1{margin-top:10px;}

.mt-2{margin-top:20px;}

.mt-3{margin-top:30px;}

.mt-4{margin-top:40px;}

.mt-5{margin-top:60px;}

.mb-1{margin-bottom:10px;}

.mb-2{margin-bottom:20px;}

.mb-3{margin-bottom:30px;}

.mb-4{margin-bottom:40px;}

.mb-5{margin-bottom:60px;}



/*==========================
TEXT
==========================*/

.text-center{

text-align:center;

}

.text-gradient{

background:

linear-gradient(

90deg,

var(--secondary),

var(--primary));

-webkit-background-clip:text;

-webkit-text-fill-color:transparent;

}



/*==========================
BACKGROUND
==========================*/

body::before{

content:"";

position:fixed;

inset:0;

background:

radial-gradient(circle at top left,

rgba(124,58,237,.18),

transparent),

radial-gradient(circle at bottom right,

rgba(0,229,255,.14),

transparent),

radial-gradient(circle at center,

rgba(255,77,157,.08),

transparent);

pointer-events:none;

z-index:-1;

}



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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-thumb{

background:

linear-gradient(

180deg,

var(--secondary),

var(--primary));

border-radius:20px;

}



/*==========================
SELECTION
==========================*/

::selection{

background:var(--secondary);

color:#000;

}



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

@media(max-width:992px){

section{

padding:90px 0;

}

.container{

width:94%;

}

}


/*======================================
SMOOTH SCROLL
======================================*/

body{

overflow:auto;

}