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

html{
scroll-behavior:smooth;
}

body{
font-family:"Inter",sans-serif;
color:#e8e8e8;
line-height:1.6;

background:
radial-gradient(circle at 20% 30%, rgba(168,85,247,0.10), transparent 40%),
radial-gradient(circle at 80% 70%, rgba(192,132,252,0.08), transparent 40%),
radial-gradient(circle at 60% 20%, rgba(147,51,234,0.06), transparent 50%),
#141414;
}


/* LAYOUT  */

.container{
width:min(92%,1200px);
margin:0 auto;
}

.narrow{
max-width:760px;
}

.section{
padding:90px 0;
}

.section-dark{
background:#101010;
}

.text-center{
text-align:center;
}

.section-tag,
.eyebrow{
display:inline-block;
margin-bottom:14px;
font-size:0.9rem;
font-weight:700;
letter-spacing:0.08em;
text-transform:uppercase;
color:#a855f7;
}


/* HEADER */

.logo-img{
height:110px;
width:auto;
display:block;
}

.footer-logo{
height:80px;
width:auto;
display:block;
}

.site-header{
position:sticky;
top:0;
z-index:1000;
background:rgba(20,20,20,0.92);
backdrop-filter:blur(10px);
border-bottom:1px solid #2a2a2a;
}

.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
min-height:90px;
}

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

.main-nav{
display:flex;
align-items:center;
gap:28px;
}

.main-nav a{
text-decoration:none;
color:#d9d9d9;
font-weight:500;
transition:color 0.2s ease;
}

.main-nav a:hover{
color:#a855f7;
}


/* HERO */

.hero{
padding:130px 0 110px;
background:
linear-gradient(rgba(16,16,16,0.85),rgba(16,16,16,0.85)),
url("images/hero.jpg") center/cover no-repeat;
border-bottom:3px solid #a855f7;
}

.hero-content{
max-width:760px;
}

.hero h1{
font-size:clamp(2.5rem,5vw,4.5rem);
line-height:1.05;
font-weight:800;
color:#ffffff;
margin-bottom:20px;
}

.hero-text{
max-width:680px;
font-size:1.1rem;
color:#bdbdbd;
margin-bottom:34px;
}

.hero-actions{
display:flex;
gap:14px;
}


/* BUTTONS */

.btn{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:48px;
padding:0 22px;
border-radius:10px;
text-decoration:none;
font-weight:600;
transition:0.2s ease;
}

.btn-primary{
background:linear-gradient(135deg,#7e22ce,#a855f7);
color:#ffffff;
}

.btn-primary:hover{
transform:translateY(-2px);
}

.btn-secondary{
background:transparent;
color:#f3f3f3;
border:1px solid #3a3a3a;
}

.btn-secondary:hover{
background:#222;
}


/* TYPO */

h2{
font-size:clamp(2rem,4vw,2.8rem);
margin-bottom:18px;
color:#ffffff;
}

h3{
font-size:1.25rem;
color:#ffffff;
margin-bottom:12px;
}

p{
color:#bebebe;
}


/* ABOUT */

.about{
background:transparent;
}

.about p{
font-size:1.05rem;
}

.about-features{
margin:20px 0;
padding-left:0;
list-style:none;
}

.about-features li{
margin-bottom:6px;
font-weight:500;
}


/* HIGHLIGHT */

.highlight{
background:linear-gradient(135deg,#101010,#1b1b1b);
border-top:1px solid #252525;
border-bottom:1px solid #252525;
}


/* SERVICES */

.services{
background:transparent;
}

.services h2{
margin-bottom:50px;
}

.services-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:24px;
}

.service-card{
background:#1e1e1e;
border:1px solid #2f2f2f;
border-top:3px solid #a855f7;
border-radius:18px;
padding:28px;
transition:transform .2s ease, box-shadow .2s ease;
}

.service-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 45px rgba(0,0,0,0.35);
}

.service-icon{
width:70px;
height:70px;
display:inline-flex;
align-items:center;
justify-content:center;
margin-bottom:18px;
border-radius:16px;
background:linear-gradient(135deg,#7e22ce,#a855f7);
font-size:2rem;
color:white;
}

.service-card h3{
margin-bottom:14px;
}


/* CONTACT */

.contact{
background:#151515;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1.1fr;
gap:42px;
}

.contact-details{
margin-top:24px;
padding:22px;
background:#1c1c1c;
border-radius:16px;
}

.contact-details a{
color:#ffffff;
text-decoration:none;
}

.contact-form{
background:#1c1c1c;
border-radius:18px;
padding:28px;
}

.form-group{
margin-bottom:18px;
}

label{
display:block;
margin-bottom:8px;
font-weight:600;
}

input,
textarea{
width:100%;
padding:14px 15px;
border-radius:10px;
border:1px solid #313131;
background:#141414;
color:#f0f0f0;
}

input:focus,
textarea:focus{
outline:none;
border-color:#a855f7;
}


/* FOOTER */

.footer-grid p{
margin-bottom:6px;
}

.site-footer{
background:#101010;
padding:70px 0;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:32px;
}

.footer-links{
list-style:none;
}

.footer-links li + li{
margin-top:8px;
}

.footer-links a{
color:#bdbdbd;
text-decoration:none;
}

.footer-links a:hover{
color:#ffffff;
}


/* RESPONSIVE */

@media (max-width:980px){

.services-grid,
.footer-grid,
.contact-grid{
grid-template-columns:1fr 1fr;
}

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

}


@media (max-width:760px){

.section{
padding:72px 0;
}

.main-nav{
display:none;
}

.site-header{
padding:0;
}

/* LOGO MOBILE */

.header-inner{
display:flex;
justify-content:center;
align-items:center;
min-height:104px;
padding:10px 0 12px;
}

.logo{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:auto;
margin:0 auto;
overflow:visible;
}

.logo-img{
display:block;
height:92px;
width:auto;
max-width:82vw;
margin:0 auto;
transform:none;
}

/* HERO MOBILE */

.hero{
padding:50px 0 45px;
}

.hero-content{
max-width:100%;
text-align:left;
}

.hero h1{
font-size:1.8rem;
line-height:1.1;
word-break:normal;
overflow-wrap:break-word;
}

.hero-text{
max-width:100%;
font-size:1rem;
margin-bottom:0;
}

.narrow{
max-width:100%;
}

.container{
width:min(92%,100%);
}

.hero-actions{
flex-direction:column;
}

.services-grid,
.footer-grid,
.contact-grid{
grid-template-columns:1fr;
}

.contact-form,
.contact-details,
.service-card{
padding:22px;
}

}