/* =====================================
File: style.css
Description: Professional Futuristic Theme for ImagiSoft Ltd
===================================== */

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

body{
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
background:#020617;
color:#e2e8f0;
line-height:1.6;
overflow-x:hidden;
}

/* Subtle animated background */

body::before{
content:"";
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(130deg,#020617,#0f172a,#0b2447,#020617);
background-size:300% 300%;
animation:bgMove 18s ease infinite;
z-index:-2;
}

@keyframes bgMove{
0%{background-position:0% 50%;}
50%{background-position:100% 50%;}
100%{background-position:0% 50%;}
}

/* Header */

header{
background:rgba(15,23,42,0.65);
backdrop-filter:blur(12px);
border-bottom:1px solid rgba(255,255,255,0.08);
padding:18px 5%;
position:sticky;
top:0;
z-index:100;
}

.nav-container{
display:flex;
justify-content:space-between;
align-items:center;
}

.logo{
font-size:1.5rem;
font-weight:600;
letter-spacing:0.5px;
color:#38bdf8;
}

/* Navigation */

nav ul{
display:flex;
list-style:none;
align-items:center;
}

nav ul li{
margin-left:28px;
}

nav ul li a{
color:#cbd5f5;
text-decoration:none;
font-size:0.95rem;
transition:0.25s;
}

nav ul li a:hover{
color:#38bdf8;
}

.nav-launch{
display:inline-block;
padding:8px 18px;
border-radius:20px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:white !important;
font-weight:600;
font-size:0.88rem !important;
transition:all 0.3s ease !important;
box-shadow:0 4px 12px rgba(56,189,248,0.2);
}

.nav-launch:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(56,189,248,0.4);
color:white !important;
}

/* Mobile menu */

.menu-toggle{
display:none;
font-size:1.8rem;
cursor:pointer;
}

/* Hero */

.hero{
padding:120px 5%;
text-align:center;
max-width:1100px;
margin:auto;
}

.hero h1{
font-size:2.8rem;
margin-bottom:20px;
font-weight:700;
background:linear-gradient(
  105deg,
  #1e3a8a 0%,
  #1e40af 15%,
  #3b82f6 30%,
  #bfdbfe 43%,
  #ffffff 50%,
  #bfdbfe 57%,
  #3b82f6 70%,
  #1e40af 85%,
  #1e3a8a 100%
);
background-size:300% auto;
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color:transparent;
color:transparent;
-webkit-animation:textShine 2.6s ease-in-out infinite;
animation:textShine 2.6s ease-in-out infinite;
will-change:background-position;
transform:translateZ(0);
}

@-webkit-keyframes textShine{
0%{background-position:200% center;}
100%{background-position:-100% center;}
}

@keyframes textShine{
0%{background-position:200% center;}
100%{background-position:-100% center;}
}

.hero p{
font-size:1.15rem;
color:#cbd5f5;
max-width:650px;
margin:auto;
}

/* Button */

.cta-btn{
display:inline-block;
margin-top:35px;
padding:14px 34px;
border-radius:30px;
background:linear-gradient(90deg,#2563eb,#38bdf8);
color:white;
text-decoration:none;
font-weight:600;
transition:all 0.3s ease;
box-shadow:0 8px 20px rgba(56,189,248,0.2);
border:none;
cursor:pointer;
font-size:1rem;
}

.cta-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 30px rgba(56,189,248,0.4);
}

/* Features */

.features{
padding:80px 5%;
max-width:1200px;
margin:auto;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
}

.feature-box{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.08);
border-radius:14px;
padding:35px;
backdrop-filter:blur(10px);
transition:0.3s;
}

.feature-box:hover{
border-color:#38bdf8;
transform:translateY(-5px);
}

.feature-box h3{
margin-bottom:12px;
font-size:1.2rem;
color:#60a5fa;
}

.feature-box p{
color:#cbd5f5;
}

/* Info Section */

.section{
padding:90px 5%;
max-width:900px;
margin:auto;
text-align:center;
}

.section h2{
font-size:1.3rem;
margin-bottom:18px;
}

/* Contact form inputs */

.section input,
.section textarea{
background:rgba(255,255,255,0.05);
border:1px solid rgba(255,255,255,0.15);
border-radius:8px;
color:#e2e8f0;
font-size:0.95rem;
}

.section input:focus,
.section textarea:focus{
outline:none;
border-color:#38bdf8;
}

.section label{
color:#94a3b8;
font-size:0.9rem;
display:block;
margin-bottom:6px;
}

/* Footer */

footer{
margin-top:80px;
padding:40px 5%;
border-top:1px solid rgba(255,255,255,0.08);
text-align:center;
color:#94a3b8;
}

/* Mobile */

@media (max-width:768px){

.hero h1{
font-size:2.1rem;
}

nav ul{
display:none;
flex-direction:column;
align-items:flex-start;
background:#020617;
position:absolute;
top:70px;
right:5px;
width:220px;
border:1px solid rgba(255,255,255,0.1);
border-radius:10px;
padding:10px 0;
}

nav ul.show{
display:flex;
}

nav ul li{
margin:10px 20px;
}

.menu-toggle{
display:block;
color:#e2e8f0;
}

.nav-launch{
margin-top:5px;
}

}

.section-sub{
margin-top:14px;
}

.section-sub-heading{
margin-top:52px;
margin-bottom:10px;
font-size:1.3rem;
color:#38bdf8;
font-weight:600;
letter-spacing:0.3px;
}

/* Footer links */

.footer-links{
margin-top:16px;
}

.footer-links a{
color:#38bdf8;
text-decoration:none;
font-size:0.9rem;
transition:color 0.2s;
}

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

/* Partner card */

.partner-btn{
margin-top:24px;
display:inline-block;
}