/* ==========================================================
   MultiCreators.nl
   Premium Theme v1.0
========================================================== */

:root{

--bg:#050505;
--bg2:#101010;

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

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

--red:#ff2020;

--text:#f5f5f5;

--muted:#bdbdbd;

--radius:22px;

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

}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{

font-family:
Inter,
Segoe UI,
Arial,
sans-serif;

background:
radial-gradient(circle at top left,
rgba(255,0,0,.18),
transparent 35%),

radial-gradient(circle at bottom right,
rgba(255,0,0,.12),
transparent 40%),

linear-gradient(180deg,#111,#050505);

color:var(--text);

overflow-x:hidden;

}

/* scrollbar */

::-webkit-scrollbar{

width:12px;

}

::-webkit-scrollbar-track{

background:#111;

}

::-webkit-scrollbar-thumb{

background:var(--red);

border-radius:10px;

}

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

.navbar{

position:fixed;

top:0;

left:0;

right:0;

height:80px;

display:flex;

align-items:center;

justify-content:space-between;

padding:0 60px;

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

backdrop-filter:blur(20px);

z-index:999;

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

}

.logo img{

height:90px;

transition:.4s;

}

.logo img:hover{

transform:scale(1.05);

filter:drop-shadow(0 0 20px red);

}

.navbar ul{

display:flex;

gap:40px;

list-style:none;

}

.navbar a{

color:white;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.navbar a:hover{

color:var(--red);

}

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

.hero{

height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:100px 30px;

text-align:center;

}

.hero-content{

max-width:900px;

}

.hero h1{

font-size:clamp(3rem,8vw,6rem);

font-weight:800;

line-height:1.1;

margin-bottom:25px;

}

.hero p{

font-size:1.3rem;

color:var(--muted);

line-height:1.8;

margin-bottom:45px;

}

.buttons{

display:flex;

gap:20px;

justify-content:center;

flex-wrap:wrap;

}

.btn{

display:inline-block;

padding:16px 34px;

border-radius:999px;

text-decoration:none;

font-weight:700;

transition:.35s;

}

.primary{

background:var(--red);

color:white;

box-shadow:0 0 30px rgba(255,0,0,.3);

}

.primary:hover{

transform:translateY(-5px);

box-shadow:0 0 45px rgba(255,0,0,.6);

}

.secondary{

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

color:white;

}

.secondary:hover{

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

}

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

section{

max-width:1300px;

margin:auto;

padding:100px 30px;

}

section h2{

font-size:2.5rem;

margin-bottom:50px;

text-align:center;

}

/* ================= CARDS ================= */

.cards{

display:grid;

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

gap:30px;

}

.card{

background:var(--card);

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

backdrop-filter:blur(16px);

padding:35px;

border-radius:var(--radius);

transition:.35s;

box-shadow:var(--shadow);

}

.card:hover{

transform:translateY(-10px);

border-color:rgba(255,0,0,.5);

}

.icon{

font-size:3rem;

margin-bottom:20px;

}

.card h3{

margin-bottom:15px;

}

.card p{

color:var(--muted);

line-height:1.7;

}

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

.portfolio-grid{

display:grid;

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

gap:30px;

}

.placeholder{

height:250px;

display:flex;

align-items:center;

justify-content:center;

background:var(--card);

border-radius:20px;

font-size:1.5rem;

transition:.3s;

cursor:pointer;

}

.placeholder:hover{

transform:scale(1.03);

border:1px solid red;

}

/* ================= CONTACT ================= */

form{

display:flex;

flex-direction:column;

gap:20px;

max-width:700px;

margin:auto;

}

input,

textarea{

padding:18px;

background:#151515;

border:1px solid #333;

color:white;

border-radius:15px;

font-size:1rem;

}

textarea{

min-height:180px;

resize:vertical;

}

button{

padding:18px;

background:var(--red);

border:none;

border-radius:999px;

color:white;

font-weight:700;

cursor:pointer;

transition:.3s;

}

button:hover{

transform:translateY(-3px);

box-shadow:0 0 25px rgba(255,0,0,.5);

}

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

footer{

padding:70px 20px;

text-align:center;

background:#090909;

margin-top:100px;

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

}

footer p{

margin:8px;

color:#aaa;

}

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

@media(max-width:900px){

.navbar{

padding:0 20px;

}

.navbar ul{

display:none;

}

.hero h1{

font-size:3rem;

}

.hero p{

font-size:1.05rem;

}

section{

padding:70px 20px;

}

}

/* Fade animaties */

.hidden{

opacity:0;

transform:translateY(40px);

transition:
opacity .8s ease,
transform .8s ease;

}

.visible{

opacity:1;

transform:translateY(0);

}

/* =======================================
   Background Particles
======================================= */

#particles{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

z-index:-1;

pointer-events:none;

opacity:.9;

}