/* =========================
GLOBAL
========================= */

body{

font-family:'Segoe UI',sans-serif;
margin:0;
color:white;

background:
radial-gradient(circle at 20% 20%, #3d2b7c 0%, transparent 40%),
linear-gradient(135deg,#0b0f2f,#1a1446,#241f6b);

min-height:100vh;

display:flex;
flex-direction:column;

}

main{
flex:1;
}


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

.custom-navbar{

background:rgba(15,15,40,0.75);
backdrop-filter:blur(10px);
border-bottom:1px solid rgba(255,255,255,0.08);

}

.navbar input{
width:170px;
max-width:170px;
}


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

.hero-section{

min-height:75vh;

background:
radial-gradient(circle at 30% 20%, rgba(107,76,246,0.35), transparent 40%),
linear-gradient(
135deg,
#0b0f2f 0%,
#1a1446 50%,
#2b1c63 100%
);

}

.hero-img{
max-height:380px;
}


/* =========================
CORE CAPABILITIES SECTION
========================= */

.bg-light{

padding:70px 0;

background: linear-gradient(
180deg,
#f1ecff 0%,
#ffffff 100%
) !important;

color:#222;

}

.bg-light h2{
color:#111 !important;
}

.bg-light h5{
color:#222;
}

.bg-light p{
color:#444;
}


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

.bg-light .card{

background:rgba(255,255,255,0.75);

border-radius:14px;

border:1px solid rgba(120,100,255,0.15);

backdrop-filter:blur(8px);

transition:0.2s;

}

.bg-light .card:hover{

transform:translateY(-4px);

box-shadow:0 12px 30px rgba(0,0,0,0.15);

}


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

footer{

background:#212529;
color:white;
text-align:center;
padding:15px 0;

}

/* =========================
   MODAL TEXT FIX
========================= */

.modal-content{
color:#222;
}

.modal-content p{
color:#333;
}

.modal-content h5{
color:#111;
}

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

.logo-shield{

color:#9d7dff;

font-size:1.5rem;

filter:drop-shadow(
0 0 8px rgba(157,125,255,.4)
);

}

.text-highlight{

color:#a98cff;

text-shadow:
0 0 15px rgba(169,140,255,.35);

}

.hero-badge{

display:inline-block;

padding:8px 16px;

background:rgba(141,107,255,.15);

border:1px solid rgba(141,107,255,.25);

border-radius:30px;

font-size:.85rem;

font-weight:500;

margin-bottom:20px;

}

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

.hero-section{

min-height:65vh;

}

.hero-left{

position:relative;

padding-right:20px;

}

.hero-left h1{

font-size:3.8rem;

max-width:520px;

line-height:1.05;

letter-spacing:-2px;

margin-bottom:25px !important;

}

.hero-left p{

max-width:380px;

line-height:1.55;

font-size:1.15rem;

margin-bottom:30px !important;

color:rgba(255,255,255,.92);

}

.hero-badge,
.hero-left h1,
.hero-left p,
.hero-left a{

position:relative;
z-index:2;

}

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

.hero-shield{

position:absolute;

top:60px;
left:-25px;

z-index:0;

pointer-events:none;

}

.hero-shield::before{

content:"";

position:absolute;

width:220px;
height:220px;

left:-35px;
top:-20px;

border-radius:50%;

background:
radial-gradient(
circle,
rgba(157,125,255,.18),
transparent 70%
);

filter:blur(35px);

}

.hero-shield i{

font-size:8rem;

color:rgba(157,125,255,.12);

filter:
drop-shadow(0 0 25px rgba(157,125,255,.20));

}

/* =========================
DASHBOARD PREVIEW
========================= */

.dashboard-preview-image{

position:relative;

display:flex;

justify-content:center;

align-items:center;

margin-left:40px;

transform:translateY(-15px);

}

.dashboard-image{

position:relative;

z-index:2;

width:112%;

max-width:none;

border-radius:22px;

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

box-shadow:
0 25px 60px rgba(0,0,0,.40);

transition:.3s;

}

.dashboard-image:hover{

transform:translateY(-4px);

}

/* =========================
DASHBOARD SHIELD
========================= */

.dashboard-shield{

position:absolute;

right:-60px;
bottom:-35px;

z-index:0;

pointer-events:none;

}

.dashboard-shield i{

font-size:11rem;

color:rgba(157,125,255,.05);

filter:
drop-shadow(0 0 30px rgba(157,125,255,.18));

}

/* =========================
FEATURES
========================= */

.features-section{

padding:10px 0 15px;

background:transparent;

}

.feature-card{

background:rgba(42,33,95,.55);

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

border-radius:16px;

backdrop-filter:blur(12px);

transition:.3s;

padding:28px !important;

min-height:140px;

}

.feature-card:hover{

transform:translateY(-5px);

box-shadow:0 0 25px rgba(130,100,255,.20);

}

.feature-card h5{

margin-bottom:15px;

font-size:1.25rem;

}

.feature-card p{

margin-bottom:0;

opacity:.9;

line-height:1.6;

}

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

.footer-custom{

background:transparent;

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

padding:14px 0;

margin-top:15px;

font-size:.85rem;

color:rgba(255,255,255,.65);

}

/* =========================
RESPONSIVE
========================= */

@media (max-width:992px){

.hero-section{

padding:50px 0;

}

.hero-left{

padding-right:0;

text-align:center;

}

.hero-left h1{

font-size:3rem;

max-width:100%;

}

.hero-left p{

max-width:100%;

margin-left:auto;
margin-right:auto;

}

.dashboard-preview-image{

margin-left:0;

margin-top:40px;

transform:none;

justify-content:center;

}

.dashboard-image{

width:100%;

}

.features-section{

padding-top:30px;

}

}