/* =========================
   DREAMLINE DESIGN - FINAL MASTER
========================= */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Inter', sans-serif;
}

html{
scroll-behavior:smooth;
}

body{
background:#050505;
color:white;
overflow-x:hidden;
cursor:none;
}

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

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 15% 20%, rgba(255,0,0,0.25), transparent 40%),
radial-gradient(circle at 80% 30%, rgba(255,255,255,0.06), transparent 40%),
radial-gradient(circle at 50% 80%, rgba(255,0,0,0.15), transparent 40%);
filter:blur(90px);
z-index:-2;
}

body::after{
content:"";
position:fixed;
inset:0;
background-image:url("https://www.transparenttextures.com/patterns/cubes.png");
opacity:0.03;
z-index:-1;
}

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

header{
display:flex;
justify-content:space-between;
align-items:center;
padding:20px 8%;
position:fixed;
width:100%;
top:0;
left:0;
background:rgba(0,0,0,0.4);
backdrop-filter:blur(15px);
border-bottom:1px solid rgba(255,255,255,0.05);
z-index:10;
}

.logo{
display:flex;
align-items:center;
gap:10px;
}

.logo img{
width:40px;
border-radius:50%;
}

nav a{
color:#aaa;
margin-left:20px;
text-decoration:none;
font-size:14px;
transition:.3s;
}

nav a:hover{
color:red;
}

/* =========================
   PAGE
========================= */

.page{
padding:120px 8%;
}

.page h1{
font-size:40px;
margin-bottom:30px;
}

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

.hero{
height:100vh;
display:flex;
align-items:center;
padding:0 8%;
}

.hero-content{
background:rgba(255,255,255,0.03);
padding:40px;
border-radius:20px;
border:1px solid rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
max-width:600px;
}

.hero h1{
font-size:40px;
margin-bottom:15px;
}

.hero p{
color:#bbb;
line-height:1.6;
}

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

.btn{
display:inline-block;
margin-top:20px;
padding:12px 25px;
background:red;
color:white;
border-radius:30px;
text-decoration:none;
transition:.3s;
}

.btn:hover{
transform:translateY(-3px);
box-shadow:0 0 20px rgba(255,0,0,0.4);
}

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

.grid,
.portfolio{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:20px;
}

.card,
.item{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
border-radius:15px;
padding:20px;
transition:.3s;
overflow:hidden;
}

.card:hover,
.item:hover{
transform:translateY(-6px) scale(1.02);
border-color:red;
box-shadow:0 0 25px rgba(255,0,0,0.2);
}

.item img{
width:100%;
height:180px;
object-fit:cover;
border-radius:10px;
margin-bottom:10px;
}

.item h3{
font-size:14px;
color:#ddd;
}

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

.about-box{
max-width:900px;
margin-bottom:40px;
}

.about-box p{
color:#bbb;
line-height:1.8;
margin-bottom:20px;
font-size:15px;
}

.about-box strong{
color:white;
}

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

.contact-wrapper{
display:grid;
grid-template-columns:1fr 1fr;
gap:30px;
margin-top:40px;
}

.contact-card{
background:rgba(255,255,255,0.03);
border:1px solid rgba(255,255,255,0.05);
padding:20px;
border-radius:15px;
}

.contact-card:hover{
transform:translateY(-5px);
border-color:red;
}

.contact-visual{
position:relative;
border-radius:20px;
overflow:hidden;
border:1px solid rgba(255,255,255,0.05);
}

.contact-visual img{
width:100%;
height:100%;
object-fit:cover;
filter:brightness(0.6);
}

.overlay-text{
position:absolute;
bottom:20px;
left:20px;
right:20px;
}

/* =========================
   CURSOR (FIXED - NEVER DISAPPEARS)
========================= */

.cursor{
width:10px;
height:10px;
background:red;
border-radius:50%;
position:fixed;
z-index:999999999;
pointer-events:none;
transform:translate(-50%,-50%);
box-shadow:0 0 20px red;
}

.cursor-follower{
width:35px;
height:35px;
border:1px solid rgba(255,0,0,0.5);
border-radius:50%;
position:fixed;
z-index:999999998;
pointer-events:none;
transform:translate(-50%,-50%);
}

/* cursor always visible trick */
body *{
cursor:none !important;
}

/* =========================
   LOADER
========================= */

.loader{
position:fixed;
inset:0;
background:#050505;
display:flex;
align-items:center;
justify-content:center;
z-index:999999999;
}

.loader-text{
color:red;
letter-spacing:4px;
font-size:14px;
}

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

@media(max-width:768px){

.hero h1{
font-size:28px;
}

header{
flex-direction:column;
gap:10px;
}

nav a{
margin-left:10px;
font-size:12px;
}

.hero-content{
padding:25px;
}

.contact-wrapper{
grid-template-columns:1fr;
}
}