/* 🔥 GLOBAL FIX */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
}
/* BODY BACKGROUND */
body{
margin:0;
font-family:Arial, Helvetica, sans-serif;
color:#e6edf3;

background-color:#050a14;

overflow-x: hidden;
background-position: center;

background-image:
linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);

background-size:30px 30px;

animation:gridMove 10s linear infinite;
}

/* GRID ANIMATION */
@keyframes gridMove{
0%{
background-position:0 0;
}

100%{
background-position:40px 40px;
}
}
header{
  width: 100%;
  margin: 0;
  padding: 30px 20px;

  background-blend-mode: multiply;

  text-align: center;

  position: relative;
  overflow: hidden;

  background:#020617; /* ✅ clean empty background */

  border-bottom: 1px solid #1f2937;
}

.header-content h1{
font-size: 40px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 4px;
line-height: 1.2;
}

.header-content p{
font-size: 28px;
color: #ffffff;
margin-top: 10px;
letter-spacing: 1px;
}

nav a{
  color:#9ca3af;
  text-decoration:none;
  font-weight:600;
  font-size:14px;
  padding:6px 8px;

  position:relative;
  display:inline-block;

  cursor:pointer;
  transition: all 0.25s ease;

  border-bottom:2px solid rgba(56,189,248,0.3); /* 🔥 ALWAYS visible */
}
/* HOVER (DESKTOP) */
nav a:hover{
  color:#ffffff;
  border-bottom:2px solid #38bdf8; /* 🔥 stronger */
}

/* TAP / CLICK (MOBILE) */
nav a:active{
  color:#ffffff;
  border-bottom:2px solid #38bdf8;
}

/* 🔥 HOVER EFFECT (CLEAN & PREMIUM) */
nav a:hover{
  color:#ffffff;
}

/* 🔥 SMOOTH UNDERLINE */
nav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-4px;
  width:0%;
  height:2px;
  background:#38bdf8;
  transition:width 0.25s ease;
}

nav a:hover::after{
  width:100%;
}

/* ================= DESKTOP ================= */
@media (min-width:768px){
  nav{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
  }

  nav a{
    margin:0 12px;
    padding:10px 12px;
  }
}

.hero{
  text-align:center;
  padding: 20px 20px 10px;
  margin-top: 0;
}

.hero h2{
  font-size:34px;
  margin-top:10px;
  margin-bottom:5px;

  font-weight:800;              /* 🔥 strong bold */
  letter-spacing:2px;
  color:#e5e7eb;

  text-transform:uppercase;

  text-shadow:
    0 2px 6px rgba(0,0,0,0.8);  /* 🔥 depth, not glow */
}

.hero p{
  color:#9ca3af;
  font-size:12px;
  line-height:1.7;
  margin-top:8px;
  padding:0 15px;
  letter-spacing:1px;
  text-transform:uppercase; /* 🔥 makes it sharp */
}

.cta-button{
display:inline-block;
margin-top:25px;
padding:12px 30px;
background:#2563eb;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
}

.cta-button:hover{
background:#1d4ed8;
}

.grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:25px;
padding:40px;
}

.card{
background:#111827;
padding:25px;
border-radius:10px;
border:1px solid #1f2937;
}

.card h3{
margin-top:0;
color:#60a5fa;
}

.card p{
color:#9ca3af;
}

.card button{
margin-top:10px;
padding:8px 15px;
background:#2563eb;
border:none;
color:white;
border-radius:4px;
cursor:pointer;
}

.card button:hover{
background:#1d4ed8;
}

footer{
background:#020617;
padding:25px;
text-align:center;
color:#6b7280;
margin-top:40px;
border-top:1px solid #1f2937;
}

/* SUBMIT INTELLIGENCE REPORT BUTTON */

.cta-button{
display:inline-block;
margin-top:20px;
padding:14px 30px;
background:#1f6feb;
color:white;
text-decoration:none;
border-radius:6px;
font-weight:bold;
font-size:16px;
border:1px solid #2f81f7;
box-shadow:0 0 10px rgba(31,111,235,0.4);
transition:0.3s;
letter-spacing:0.5px;
text-transform:uppercase;
}

.cta-button:hover{
background:#388bfd;
box-shadow:0 0 15px rgba(56,139,253,0.6);
border:2px solid #2f81f7;
}
.main-container{
max-width:1100px;
margin:auto;
padding:40px;
text-align:center;
background:rgba(20,20,30,0.6);
border:1px solid rgba(0,150,255,0.2);
border-radius:10px;
box-shadow:0 0 25px rgba(0,120,255,0.15);
}
.icon{
font-size:40px;
margin-bottom:10px;
display:block;
}
/* Icon floating animation */

.icon{
animation: floatIcon 3s ease-in-out infinite;
text-shadow: 0 0 8px #4da6ff, 0 0 15px #4da6ff;
}

/* Floating effect */

@keyframes floatIcon{
0%{
transform: translateY(0px);
}

50%{
transform: translateY(-6px);
}

100%{
transform: translateY(0px);
}
}

.card-btn{
display: inline-block;
background: #3b82f6;
color: #fff;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-size: 14px;
margin-top: 10px;
transition: 0.3s;
}

.card-btn:hover{
background: #2563eb;
}
.card{
text-align: left;
}
/* SIDEBAR */


/* Hover Effect */
.sidebar a:hover{
    background: #101a2e;
    color: #4fd3ff;
    padding-left: 35px;
}


/* PUSH CONTENT RIGHT OF SIDEBAR */

.white-text{
color: #ffffff;
text-transform: uppercase;
}

.blue-text{
color: #3b82f6;
text-transform: uppercase;
}
.white-text,
.blue-text{
font-size: 60px;
font-weight: 600;
letter-spacing: 4px;
text-transform: uppercase;
}
.header-content h1::after{
content: "";
display: block;
width: 60%;
height: 3px;
margin: 10px auto 0;
background: linear-gradient(to right, #3b82f6, transparent);
}
/* SERVICES SECTION */

.services{
padding: 80px 20px;
text-align: center;
background: #f9fafb;
}

.services h2{
font-size: 38px;
font-weight: 800;
margin-bottom: 50px;
color: #111827;
text-transform: uppercase;
letter-spacing: 2px;
position: relative;
display: inline-block;
}

/* Stylish underline */
.services h2::after{
content: "";
display: block;
width: 60%;
height: 3px;
margin: 10px auto 0;
background: linear-gradient(to right, #3b82f6, transparent);
}

.services-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
max-width: 1200px;
margin: 0 auto;
}

.service-card{
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 25px;
width: 300px;
text-align: left;
transition: all 0.3s ease;
cursor: pointer;
}

.service-card h3{
color: #111827;
margin-bottom: 10px;
font-size: 18px;
}

.service-card p{
color: #4b5563;
font-size: 14px;
line-height: 1.6;
}

.service-card:hover{
transform: translateY(-8px);
border-color: #3b82f6;
box-shadow: 0 12px 30px rgba(59,130,246,0.2);
}
/* ===== FOOTER ===== */

footer{
background: linear-gradient(to bottom, #0b0f19, #05070f);
padding: 70px 20px 30px;
border-top: 1px solid rgba(255,255,255,0.08);
box-shadow: 0 -2px 25px rgba(59,130,246,0.08);
}

/* layout */
.footer-grid{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 40px;
max-width: 1200px;
margin: 0 auto 30px;
}

/* headings */
footer h3{
color: #ffffff;
margin-bottom: 12px;
font-size: 15px;
letter-spacing: 1.2px;
text-transform: uppercase;
}

/* brand text */
.footer-brand p{
color: #9ca3af;
font-size: 14px;
}

/* lists */
.footer-section ul{
list-style: none;
padding: 0;
}

.footer-section li{
margin-bottom: 8px;
}

/* LINKS (important for visibility) */
.footer-section a{
color: #d1d5db;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}

.footer-section a:hover{
color: #3b82f6;
text-decoration: underline;
}

/* divider */
.footer-divider{
height: 1px;
background: rgba(255,255,255,0.08);
margin: 25px auto;
max-width: 1200px;
}

/* email */
.contact-email{
text-align: center;
color: #3b82f6;
font-size: 14px;
margin-top: 15px;
font-weight: 500;
letter-spacing: 0.5px;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}

.email-icon{
font-size: 16px;
}

/* copyright */
.copyright{
text-align: center;
margin-top: 8px;
font-size: 13px;
color: #9ca3af;
}

/* registration */
.registration{
text-align: center;
font-size: 12px;
color: #6b7280;
margin-top: 4px;
letter-spacing: 1px;
}
.why-us{
padding: 80px 20px;
background: rgba(255,255,255,0.9);
backdrop-filter: blur(5px);
text-align: center;
}

.why-us h2{
font-size: 32px;
margin-bottom: 40px;
color: #111827;
text-transform: uppercase;
letter-spacing: 2px;
}

.why-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
max-width: 1100px;
margin: 0 auto;
}

.why-card{
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 25px;
width: 250px;
transition: 0.3s;
}

.why-card h3{
color: #111827;
margin-bottom: 10px;
font-size: 18px;
}

.why-card p{
color: #4b5563;
font-size: 14px;
}

.why-card:hover{
transform: translateY(-5px);
border-color: #3b82f6;
box-shadow: 0 10px 25px rgba(59,130,246,0.2);
}
.about{
padding: 80px 20px;
background: #ffffff;
}

.about-container{
max-width: 900px;
margin: 0 auto;
text-align: center;
}

.about h2{
font-size: 32px;
margin-bottom: 20px;
color: #111827;
text-transform: uppercase;
letter-spacing: 2px;
}

.about p{
color: #4b5563;
font-size: 16px;
line-height: 1.7;
}
/* ===== CASE FLOW SECTION ===== */

.case-flow{
padding: 80px 20px;
background: linear-gradient(to bottom, #0b0f19, #111827);
}

/* centered container */
.case-container{
max-width: 900px;
margin: 0 auto;
padding: 40px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
text-align: center;
}

/* heading */
.case-flow h2{
font-size: 32px;
margin-bottom: 40px;
color: #111827;
text-transform: uppercase;
letter-spacing: 2px;
}

/* steps container */
.flow-container{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

/* each step card */
.flow-step{
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 20px;
width: 250px;
text-align: left;
transition: all 0.3s ease;
}

/* step title */
.flow-step h3{
color: #3b82f6;
font-size: 15px;
margin-bottom: 8px;
}

/* step text */
.flow-step p{
color: #4b5563;
font-size: 14px;
line-height: 1.6;
}

/* hover effect */
.flow-step:hover{
transform: translateY(-5px);
border-color: #3b82f6;
box-shadow: 0 10px 20px rgba(59,130,246,0.2);
}
/* ===== INTELLIGENCE SECTION ===== */

.intel{
padding: 100px 20px;
margin-bottom: 40px;
text-align: center;
background: linear-gradient(to bottom, #0b0f19, #111827);
}
.intel h2{
font-size: 32px;
margin-bottom: 15px;
color: #ffffff;
}
.intel p{
max-width: 700px;
margin: 0 auto 40px;
color: #9ca3af;
font-size: 15px;
line-height: 1.6;
}
/* cards layout */
.intel-grid{
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 25px;
}
.intel-card{
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
padding: 25px;
width: 260px;
text-align: center;
transition: all 0.3s ease;
}
.intel-card h3{
color: #ffffff;
margin-bottom: 10px;
}
.intel-card p{
color: #9ca3af;
font-size: 14px;
}
/* hover effect */
.intel-card:hover{
transform: translateY(-6px);
border-color: #3b82f6;
box-shadow: 0 10px 25px rgba(59,130,246,0.2);
}

/* ===== PORTAL SECTION ===== */
.portal{
padding: 80px 20px;
text-align: center;
background: #0b0f19;
border-top: 1px solid rgba(255,255,255,0.08);
}
.portal h2{
font-size: 30px;
margin-bottom: 15px;
color: #ffffff;
}
.portal p{
max-width: 600px;
margin: 0 auto;
color: #9ca3af;
font-size: 15px;
line-height: 1.6;
}
/* ===== FAQ SECTION ===== */

.faq{
padding: 100px 20px;
background: linear-gradient(to bottom, #111827, #0b0f19);
text-align: center;
}

/* container */
.faq-container{
max-width: 900px;
margin: 0 auto;
}

/* heading */
.faq h2{
font-size: 34px;
color: #ffffff;
margin-bottom: 40px;
text-transform: uppercase;
letter-spacing: 2px;
}

/* accordion */
.faq-item{
margin-bottom: 15px;
border-radius: 8px;
overflow: hidden;
}

/* question */
.faq-question{
width: 100%;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
color: #ffffff;
padding: 15px;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: 0.3s;
}

.faq-question:hover{
background: rgba(59,130,246,0.1);
}

/* icon */
.faq-icon{
font-size: 18px;
}

/* answer (hidden by default) */
.faq-answer{
max-height: 0;
overflow: hidden;
background: rgba(255,255,255,0.03);
transition: max-height 0.4s ease;
}

.faq-answer p{
padding: 15px;
color: #9ca3af;
font-size: 14px;
line-height: 1.6;
}

/* button */
.faq-btn{
display: inline-block;
margin-top: 40px;
padding: 14px 30px;
background: linear-gradient(135deg, #3b82f6, #2563eb);
color: #ffffff;
font-size: 14px;
font-weight: 600;
border-radius: 8px;
text-decoration: none;
transition: 0.3s;
box-shadow: 0 10px 25px rgba(59,130,246,0.3);
}

.faq-btn:hover{
transform: scale(1.05);
box-shadow: 0 15px 35px rgba(59,130,246,0.5);
}
.forensic-title{
display:inline-block;
position:relative;
font-size:48px;
font-weight:900;
letter-spacing:4px;
color:#ffffff;
overflow:hidden;

/* CLEAN PROFESSIONAL SHADOW */
text-shadow:
0 2px 6px rgba(0,0,0,0.8),
0 0 12px rgba(56,189,248,0.25);

/* subtle smoothness */
transition: all 0.2s ease;
}

/* BUREAU highlight */
.forensic-title:last-child{
color:#38bdf8;
text-shadow:
0 0 15px rgba(56,189,248,0.8),
0 0 30px rgba(56,189,248,0.5);
}

/* LIGHT SCAN EFFECT */
.forensic-title::after{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:100%;
background: linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.3),
transparent
);
animation: scan 6s infinite;
}

/* ANIMATION */
@keyframes scan{
0%{ left:-100%; }
100%{ left:100%; }
}
/* LIGHT SCAN EFFECT */
.forensic-title::after{
   ...
}
/* 🔥 CLEAN FINAL MOBILE FIX */
@media (max-width: 768px){

  .hero{
    padding: 20px;
  }

  .main-container{
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    border-radius: 12px;
  }

  .main-container h2{
    font-size: 22px;
    text-align: center;
    line-height: 1.3;
  }

  .main-container p{
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
  }

  .cta-button{
    display: block;
    width: 100%;
    text-align: center;
  }

}

/* ✨ GLASS EFFECT + DEPTH */
.main-container{
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.hero h2 span{
  color:#38bdf8;
  font-weight:900;
  letter-spacing:3px;

  text-shadow:
    0 2px 8px rgba(0,0,0,0.9);
}
.hero h2 span{
  border-bottom:2px solid rgba(56,189,248,0.6);
  padding-bottom:3px;

  box-shadow: 0 2px 10px rgba(56,189,248,0.2); /* 🔥 soft glow line */
}
.hero{
  animation: fadeIn 1.2s ease-in-out;
}
.hero h2{
  animation: slideUp 1s ease-out;
}
.hero-sub{
  animation: fadeIn 1.8s ease-in-out;
}
@keyframes fadeIn{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes slideUp{
  from{
    opacity:0;
    transform: translateY(20px);
  }
  to{
    opacity:1;
    transform: translateY(0);
  }
}
body{
  letter-spacing:0.3px;
}
body{
  animation: fadeIn 0.8s ease-in;
}
body.fade-out{
  opacity:0;
  transition: opacity 0.4s ease;
}
body{
  background:#000;
  animation: pageLoad 0.8s ease-out;
}
@keyframes pageLoad{
  from{
    opacity:0;
    transform: scale(1.02);
  }
  to{
    opacity:1;
    transform: scale(1);
  }
}
/* LOADER SCREEN */
#loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#020617;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  z-index:9999;
}

/* TITLE */
#loader h1{
  color:#e5e7eb;
  font-size:28px;
  letter-spacing:2px;
  text-align:center;
}

#loader span{
  color:#38bdf8;
}

/* PROGRESS BAR */
.progress-container{
  width:220px;
  height:4px;
  background:#1f2937;
  margin-top:15px;
  overflow:hidden;
  border-radius:2px;
}

#progress-bar{
  width:0%;
  height:100%;
  background:#38bdf8;
  transition: width 0.3s ease;
}

/* TEXT */
#loading-text{
  margin-top:10px;
  font-size:13px;
  color:#9ca3af;
}

/* TOP SCANNING LINE */
#top-line{
  position:fixed;
  top:0;
  left…
  @media (max-width: 600px){

  .container{
    margin:20px;
    padding:10px;
  }

  .vault-grid{
    grid-template-columns: 1fr; /* 🔥 force vertical */
    gap:15px;
  }

  .vault-card{
    padding:15px;
  }

  h1{
    font-size:22px;
  }

  p{
    font-size:14px;
  }

}
.vault-card{
  width:100%;
}
@media (max-width: 600px){

  body{
    font-size:14px;
  }

  .container{
    margin:20px;
    padding:10px;
  }

  h1{
    font-size:20px;
  }

  h2{
    font-size:18px;
  }

  p{
    font-size:14px;
  }

  .box{
    padding:15px;
  }

  table{
    font-size:12px;
  }

  th, td{
    padding:8px;
  }

}
/* 📱 EXTRA MOBILE POLISH */
@media(max-width:480px){

  h1{
    font-size:20px;
  }

  h2{
    font-size:18px;
  }

  .top-header p{
    font-size:12px;
  }

  input, textarea, select{
    font-size:16px; /* prevents zoom on iPhone */
  }

  .popup-box{
    padding:25px 20px;
  }

}
/* 🔥 FOOTER BASE */
footer{
  background: #020617;
  padding:60px 20px 30px;
  border-top:1px solid rgba(255,255,255,0.05);
}

/* GRID */
.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:40px;
  max-width:1100px;
  margin:auto;
}

/* BRAND */
.footer-brand h3{
  font-size:20px;
  letter-spacing:2px;
  margin-bottom:10px;
  color:#e5e7eb;
}

.footer-brand p{
  color:#9ca3af;
  font-size:14px;
}

/* SECTION HEADINGS */
.footer-section h3{
  font-size:14px;
  letter-spacing:1.5px;
  margin-bottom:12px;
  color:#38bdf8;
}

/* LIST */
.footer-section ul{
  list-style:none;
  padding:0;
  margin:0;
}

.footer-section li{
  margin:6px 0;
  font-size:14px;
  color:#9ca3af;
}

/* 🔗 CLICKABLE LINKS */
.footer-section a{
  color:#9ca3af;
  text-decoration:none;
  position:relative;
  transition:0.3s;
}

/* HOVER EFFECT */
.footer-section a:hover{
  color:#38bdf8;
  text-shadow:0 0 8px rgba(56,189,248,0.6);
}

/* UNDERLINE ANIMATION */
.footer-section a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-3px;
  width:0%;
  height:2px;
  background:#38bdf8;
  transition:0.3s;
}

.footer-section a:hover::after{
  width:100%;
}

/* DIVIDER */
.footer-divider{
  height:1px;
  background:linear-gradient(to right, transparent, #1f2937, transparent);
  margin:30px auto;
  max-width:1100px;
}

/* CONTACT */
.contact-email{
  text-align:center;
  color:#9ca3af;
  font-size:14px;
}

.contact-email a{
  color:#38bdf8;
  text-decoration:none;
}

/* COPYRIGHT */
.copyright{
  text-align:center;
  margin-top:10px;
  font-size:13px;
  color:#6b7280;
}

.registration{
  text-align:center;
  font-size:12px;
  color:#6b7280;
  margin-top:5px;
}

/* 📱 SMART MOBILE (YOUR EXACT REQUEST) */
@media (max-width:768px){

  .footer-grid{
    grid-template-columns: 1fr 1fr;
    gap:20px;
  }

  /* BRAND */
  .footer-brand{
    grid-column:1 / 2;
  }

  /* UNITS */
  .footer-section:nth-child(2){
    grid-column:2 / 3;
  }

  /* 🔥 USEFUL LINKS UNDER BRAND */
  .footer-section:nth-child(3){
    grid-column:1 / 2;
    margin-top:10px;
  }

}
nav a{
  border-bottom:2px solid transparent;
  padding-bottom:5px;
}

nav a:hover{
  border-bottom:2px solid #38bdf8;
}
.hero-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
/* 🔥 LOADER SCREEN */
#loader{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#020617;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  z-index:9999;
}

/* WRAPPER (keeps scan inside logo) */
.logo-wrap{
  position:relative;
  display:inline-block;
  overflow:hidden;
}

/* LOGO */
.loader-logo{
  width:55px;
  height:auto;
  margin-bottom:20px;

  animation: logoFX 2.5s ease-in-out infinite;
}

/* 🔥 SCANNING LINE (VISIBLE + CLEAN) */
.logo-wrap::after{
  content:"";
  position:absolute;
  top:0;
  left:-120%;
  width:60%;
  height:100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(56,189,248,0.9),
    rgba(255,255,255,0.9),
    rgba(56,189,248,0.9),
    transparent
  );

  filter: blur(4px);
  opacity:0.9;

  animation: scanMove 1.5s linear infinite;
}

/* SCAN MOVEMENT */
@keyframes scanMove{
  0%{ left:-120%; }
  100%{ left:120%; }
}

/* 🔥 GLOW + ZOOM + FADE */
@keyframes logoFX{
  0%{
    transform: scale(0.85);
    opacity:0.5;
    filter: drop-shadow(0 0 5px rgba(56,189,248,0.2));
  }

  50%{
    transform: scale(1.15);
    opacity:1;
    filter:
      drop-shadow(0 0 15px rgba(56,189,248,0.9))
      drop-shadow(0 0 30px rgba(56,189,248,0.5));
  }

  100%{
    transform: scale(0.85);
    opacity:0.5;
    filter: drop-shadow(0 0 5px rgba(56,189,248,0.2));
  }
}

/* TEXT */
#loading-text{
  color:#9ca3af;
  font-size:13px;
  margin-bottom:10px;
}

/* PROGRESS BAR */
.progress-container{
  width:200px;
  height:4px;
  background:#1f2937;
  border-radius:2px;
  overflow:hidden;
}

#progress-bar{
  width:0%;
  height:100%;
  background:#38bdf8;
  transition: width 0.3s ease;
}