/* =============================
   BOC Stable Premium Styles
   Palette: Royal Blue #2563EB, Neon Cyan #22D3EE, Dark #111827, Light #F9FAFB
   Font: Inter
   ============================= */
:root{
  --blue:#2563EB;
  --blue-dark:#1E40AF;
  --cyan:#22D3EE;
  --cyan-dark:#0EA5E9;
  --dark:#111827;
  --light:#F9FAFB;
  --white:#FFFFFF;
  --muted:#6B7280;
  --radius:14px;
  --shadow:0 10px 30px rgba(17,24,39,.35);
  --glow:0 0 24px rgba(34,211,238,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--light);
  color:var(--dark);
  scroll-behavior:smooth;
}

/* Preloader */
#preloader{
  position:fixed; inset:0; background:linear-gradient(135deg,var(--dark),#0b1220);
  display:flex; align-items:center; justify-content:center; z-index:9999;
  transition:opacity .6s ease, visibility .6s ease;
}
#preloader.hide{opacity:0; visibility:hidden}
#preloader .logo-wrapper{position:relative; display:flex; flex-direction:column; align-items:center; gap:18px}
.logo{
  font-weight:800; letter-spacing:.5px; line-height:1;
  background:linear-gradient(90deg,var(--blue),var(--cyan));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 8px rgba(37,99,235,.35), 0 0 16px rgba(34,211,238,.25);
}
.logo.neon{filter:drop-shadow(0 0 18px rgba(34,211,238,.45))}
.logo.small{font-size:1.1rem}
#preloader .logo{font-size:3rem}
.pulse{animation:pulse 2.2s infinite ease-in-out}
@keyframes pulse{
  0%,100%{transform:scale(1); text-shadow:0 0 10px rgba(34,211,238,.35)}
  50%{transform:scale(1.04); text-shadow:0 0 28px rgba(34,211,238,.6)}
}
.flicker{animation:flicker 4s infinite steps(60)}
@keyframes flicker{
  0%,8%,12%,100%{opacity:1}
  10%,11%{opacity:.6}
  55%{opacity:.95}
}
.loader-ring{
  width:60px; height:60px; border-radius:50%;
  border:3px solid rgba(255,255,255,.08);
  border-top-color:var(--cyan);
  animation:spin 1.2s linear infinite;
  box-shadow:var(--glow);
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Navbar */
.navbar{
  position:sticky; top:0; z-index:1000; backdrop-filter:saturate(140%) blur(8px);
  background:rgba(17,24,39,.6); color:#fff; border-bottom:1px solid rgba(255,255,255,.08);
}
.nav-inner{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.container{width:min(1200px,92%); margin:0 auto}
.brand{display:flex; align-items:center; gap:10px; color:#fff}
.brand .tagline{font-size:.9rem; color:#cbd5e1}
.nav-links{list-style:none; display:flex; gap:22px; margin:0; padding:0}
.nav-links a{color:#e5e7eb; text-decoration:none; font-weight:600}
.nav-links a:hover{color:var(--cyan); text-shadow:0 0 18px rgba(34,211,238,.5)}
.hamburger{display:none; background:none; border:0; width:38px; height:38px; cursor:pointer}
.hamburger span{display:block; height:2px; background:#e5e7eb; margin:7px 0; transition:.3s ease}

/* Hero */
.hero{position:relative; min-height:84vh; display:flex; align-items:center; overflow:hidden}
#bgCanvas{position:absolute; inset:0; width:100%; height:100%}
.hero-overlay{position:absolute; inset:0; background:radial-gradient(80% 60% at 50% 40%, rgba(37,99,235,.25), transparent 60%),
  linear-gradient(180deg, rgba(17,24,39,.85), rgba(17,24,39,.7))}
.hero-inner{position:relative; z-index:2; text-align:center; color:#fff; padding:110px 0 80px}
.hero h1{font-size:clamp(2.2rem,5vw,4rem); margin:0 0 12px}
.hero p{font-size:clamp(1rem,2.5vw,1.3rem); color:#d1d5db; margin:0 0 26px}
.cta .btn{margin:0 8px}

/* Buttons */
.btn{display:inline-flex; align-items:center; gap:10px; text-decoration:none; font-weight:700;
  padding:.9rem 1.2rem; border-radius:10px; transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.icon{width:18px; height:18px; fill:currentColor; display:inline-block}
.btn-primary{background:var(--blue); color:#fff; box-shadow:0 10px 20px rgba(37,99,235,.25)}
.btn-primary:hover{background:var(--blue-dark); transform:translateY(-2px)}
.btn-secondary{background:var(--cyan); color:#0b1220; box-shadow:0 10px 20px rgba(34,211,238,.25)}
.btn-secondary:hover{background:var(--cyan-dark); transform:translateY(-2px)}
.btn-accent{background:linear-gradient(90deg,var(--blue),var(--cyan)); color:#0b1220; box-shadow:var(--glow)}
.btn-accent:hover{filter:brightness(1.05); transform:translateY(-2px)}

/* Sections */
.light-section{background:var(--light); color:var(--dark)}
.dark-section{background:var(--dark); color:#e5e7eb}
.section-inner{padding:80px 0}
.section-title{font-size:clamp(1.6rem,2.8vw,2.2rem); margin:0 0 12px}
.section-text{font-size:1.05rem; color:var(--muted); max-width:800px}

/* Services */
.services .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:22px; margin-top:22px}
.card{background:#0b1220; border:1px solid rgba(255,255,255,.06); border-radius:var(--radius);
  padding:24px; box-shadow:var(--shadow); transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; position:relative; overflow:hidden}
.card:hover{transform:translateY(-6px); box-shadow:0 16px 40px rgba(37,99,235,.35); border-color:rgba(34,211,238,.35)}
.card h3{margin:12px 0 8px}
.card p{margin:0; color:#cbd5e1}
.card-badge{position:absolute; top:12px; right:16px; font-weight:800; color:rgba(34,211,238,.6)}

/* Why bullets */
.bullets{display:grid; gap:10px; margin:18px 0 0; color:#111827; padding-left:0; list-style:none}
.light-section .bullets li{background:#fff; border:1px solid #e5e7eb; padding:12px 14px; border-radius:12px}

/* CTA */
.cta-inner{display:flex; flex-direction:column; align-items:center; text-align:center; padding:90px 0}
.cta h2{margin:0 0 14px; font-size:clamp(1.6rem,2.6vw,2.2rem)}

/* Footer */
.footer-inner{display:grid; grid-template-columns:1fr auto; align-items:center; gap:18px; padding:26px 0}
.footer-links{display:flex; gap:10px}
.footer-links .social{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:10px; background:#0b1220; border:1px solid rgba(255,255,255,.08);}
.footer-links .social:hover{border-color:rgba(34,211,238,.45); box-shadow:var(--glow)}
.copy{grid-column:1/-1; color:#9ca3af; font-size:.9rem}

/* Reveal Animations */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s ease}
.reveal.visible{opacity:1; transform:none}
.delay-1{transition-delay:.1s}
.delay-2{transition-delay:.2s}
.delay-3{transition-delay:.3s}
.delay-4{transition-delay:.4s}

/* Responsive */
@media (max-width:900px){
  .nav-links{position:absolute; right:4%; top:64px; background:rgba(17,24,39,.95); padding:14px; border-radius:12px;
    display:none; flex-direction:column; gap:12px; border:1px solid rgba(255,255,255,.08)}
  .nav-links.open{display:flex}
  .hamburger{display:block}
}


/* Verify Page Styling */
.verify-page {
  background: #0f0f0f;
  color: #fff;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.verify-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px 20px;
}
.verify-card {
  background: rgba(20,20,20,0.8);
  border: 1px solid #0ff;
  border-radius: 12px;
  padding: 30px;
  max-width: 450px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,255,255,0.3);
  backdrop-filter: blur(8px);
  animation: fadeIn 1.5s ease-in-out;
}
.verify-form {
  margin: 20px 0;
}
.verify-card .input {
  width: 80%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #0ff;
  margin-bottom: 15px;
}
.btn-verify {
  background: #0ff;
  color: #000;
  font-weight: bold;
  border-radius: 6px;
  padding: 10px 20px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.3s;
}
.btn-verify:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px #0ff;
}
.verify-result {
  margin-top: 15px;
  font-size: 1.1em;
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
.verify-result.show {
  opacity: 1;
}
.note {
  font-size: 0.85em;
  color: #ccc;
  margin-top: 10px;
}


/* Extra Stylish Verify Button on homepage */
.btn-verify {
  background: linear-gradient(90deg, #0ff, #00ccaa);
  color: #000;
  font-weight: bold;
  border-radius: 8px;
  padding: 12px 26px;
  margin-top: 12px;
  display: inline-block;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.btn-verify:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,200,0.7);
}


/* Ensure Verify Agent button in hero looks distinct */
.hero .btn-verify {
  display: inline-block;
  margin-top: 15px;
  background: linear-gradient(135deg, #0ff, #00ccaa);
  color: #000;
  font-weight: bold;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.hero .btn-verify:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,200,0.7);
}


/* Verify Agent button in hero CTA */
.btn-verify {
  display: inline-block;
  margin-top: 15px;
  background: linear-gradient(135deg, #0ff, #00ccaa);
  color: #000;
  font-weight: bold;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
.btn-verify:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 0 20px rgba(0,255,200,0.7);
}


/* Verify Agent button in navbar */
nav .btn-verify {
  margin-left: 15px;
  background: linear-gradient(135deg, #0ff, #00ccaa);
  color: #000 !important;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.3s ease;
}
nav .btn-verify:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 0 15px rgba(0,255,200,0.7);
}