/* 
 Modern Scheme Scout CSS
 Replace this file with your existing style.css.
 NOTE: This is a starter premium theme due to response size limits.
*/

*
{margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Inter,Arial,sans-serif
}
html{scroll-behavior:smooth}

body{
background:linear-gradient(135deg,#0b1220,#111827,#0f172a);
color:#fff;line-height:1.6}

nav{
position:sticky;top:0;z-index:1000;
display:flex;justify-content:space-between;align-items:center;
padding:20px 8%;
backdrop-filter:blur(12px);
background:rgba(10,15,25,.8);
border-bottom:1px solid rgba(255,255,255,.08)}


.logo{font-size:28px;font-weight:800}
.links{display:flex;gap:28px}
.links a{text-decoration:none;color:#d1d5db;transition:.3s}
.links a:hover{color:#60a5fa}


.demo-btn,.hero-btn,.footer-btn{
display:inline-block;
padding:14px 28px;
border-radius:14px;
text-decoration:none;
font-weight:700;
color:#fff;
background:linear-gradient(135deg,#3b82f6,#8b5cf6);
box-shadow:0 10px 30px rgba(59,130,246,.35);
transition:.3s}


.demo-btn:hover,.hero-btn:hover,.footer-btn:hover{transform:translateY(-3px)}


.hero{
padding:120px 8%;
text-align:center;
position:relative;overflow:hidden}


.hero:before{
content:"";
position:absolute;
width:500px;height:500px;
background:#2563eb;
filter:blur(180px);
opacity:.15;
left:-120px;top:-120px}

.hero h1{font-size:64px;line-height:1.1;max-width:900px;margin:auto}


.hero p{max-width:700px;margin:24px auto;color:#9ca3af;font-size:20px}

.features,.working,.showcase,.tech,footer{padding:90px 8%}

h2{text-align:center;font-size:42px;margin-bottom:18px}


.grid,.showcase-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:28px}

.card,.showcase-card,.step{
background:rgba(255,255,255,.05);
border:1px solid rgba(255,255,255,.08);
backdrop-filter:blur(10px);
border-radius:22px;
padding:28px;
transition:.35s;
box-shadow:0 10px 30px rgba(0,0,0,.25)}


.card:hover,.showcase-card:hover,.step:hover{
transform:translateY(-8px);
border-color:#60a5fa}


.card p,.showcase-sub,.tech-list{color:#9ca3af}
.steps{display:flex;gap:20px;justify-content:center;flex-wrap:wrap}
.step{width:220px;text-align:center}
.step span{
display:inline-flex;width:56px;height:56px;
align-items:center;justify-content:center;
border-radius:50%;margin-bottom:14px;
background:linear-gradient(135deg,#3b82f6,#8b5cf6);
font-weight:800}
.tech{text-align:center}


.img{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
gap:24px;
padding:0 8% 90px}
.img img{
width:100%;
border-radius:20px;
border:1px solid rgba(255,255,255,.08);
box-shadow:0 15px 40px rgba(0,0,0,.35);
transition:.35s}
.img img:hover{transform:scale(1.03)}
footer{text-align:center;border-top:1px solid rgba(255,255,255,.08)}

@media(max-width:768px){
nav{flex-direction:column;gap:16px}
.links{flex-wrap:wrap;justify-content:center}
.hero h1{font-size:42px}
.hero p{font-size:18px}
}

@media(max-width:480px){
.hero h1{font-size:34px}
.links{flex-direction:column}
.demo-btn,.hero-btn,.footer-btn{width:100%;text-align:center}
}