@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background-color:#030712;color:#f9fafb;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body.light-theme{background-color:#f8fafc;color:#111827}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}

.bg-dark-accent{background-color:#0b1120}
.text-primary-blue{color:#1a6cf6}
.bg-primary-blue{background-color:#1a6cf6}
.text-primary-orange{color:#f59e0b}
.bg-primary-orange{background-color:#f59e0b}

.glass-card{background:rgba(255,255,255,0.03);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.05)}
.light-theme .glass-card{background:rgba(255,255,255,0.8);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(0,0,0,0.08)}

.carousel-item{opacity:0;transition:opacity 1s ease-in-out,transform 1s ease-in-out;transform:scale(1.03)}
.carousel-item.active{opacity:1;transform:scale(1)}

.slide-text{transition:opacity 0.5s ease-in-out}

details>summary::-webkit-details-marker{display:none}
details>summary{list-style:none}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
  .carousel-item{transition:none!important}
}

.reveal{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease-out,transform 0.6s ease-out}
.revealed{opacity:1;transform:translateY(0)}
.reveal-delay-1{transition-delay:0.1s}
.reveal-delay-2{transition-delay:0.2s}
.reveal-delay-3{transition-delay:0.3s}
.reveal-delay-4{transition-delay:0.4s}

.glow{box-shadow:0 0 60px -12px rgba(26,108,246,0.15)}
.glow-orange{box-shadow:0 0 60px -12px rgba(189,58,232,0.15)}

::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:#030712}
::-webkit-scrollbar-thumb{background:#1f2937;border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:#374151}
.light-theme ::-webkit-scrollbar-track{background:#f1f5f9}
.light-theme ::-webkit-scrollbar-thumb{background:#94a3b8}
.light-theme ::-webkit-scrollbar-thumb:hover{background:#64748b}

::selection{background:rgba(26,108,246,0.3);color:#fff}

/* ===== Brand Gradient Text ===== */
.text-gradient-brand{
  background:linear-gradient(135deg,#1a6cf6 0%,#5244f1 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text
}

/* ===== Animated Gradient Text (shimmer) ===== */
.text-gradient-animate{
  background:linear-gradient(135deg,#1a6cf6 0%,#7c3aed 40%,#1a6cf6 60%,#5244f1 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:300% 300%;
  animation:gradientShift 3s ease infinite
}
@keyframes gradientShift{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===== Typing Cursor Blink (from animation.txt) ===== */
.typing-cursor::after{
  content:'|';
  animation:blink 1s infinite
}
@keyframes blink{
  0%,100%{opacity:1}
  50%{opacity:0}
}

/* ===== Glowing Background Orbs (from animation.txt) ===== */
.glow-orb{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
  filter:blur(140px);
  animation:orbPulse 4s ease-in-out infinite
}
.glow-orb-violet{background:rgba(189,58,232,0.2)}
.glow-orb-cyan{background:rgba(6,182,212,0.1)}
@keyframes orbPulse{
  0%,100%{opacity:0.6;transform:scale(1)}
  50%{opacity:1;transform:scale(1.1)}
}

/* ===== Cyber Grid Background (from animation.txt) ===== */
.cyber-grid{
  background-size:40px 40px;
  background-image:linear-gradient(to right,rgba(255,255,255,0.02) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(255,255,255,0.02) 1px,transparent 1px)
}

/* ===== Animated Ping Dot (from animation.txt) ===== */
.ping-dot{
  display:inline-flex;
  width:8px;
  height:8px;
  position:relative;
  vertical-align:middle
}
.ping-dot .dot-pulse{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border-radius:50%;
  background:#06B6D4;
  opacity:0.75;
  animation:ping 1s cubic-bezier(0,0,0.2,1) infinite
}
.ping-dot .dot-solid{
  position:relative;
  display:inline-flex;
  border-radius:50%;
  width:8px;
  height:8px;
  background:#06B6D4
}
@keyframes ping{
  75%,100%{transform:scale(2);opacity:0}
}

.card-hover{border-color:rgba(255,255,255,0.1);transition:all 0.3s ease}
.card-hover:hover{border-color:rgba(26,108,246,0.3);transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,0,0,0.3)}
.light-theme .card-hover{border-color:rgba(0,0,0,0.08);box-shadow:0 4px 20px rgba(0,0,0,0.06)}
.light-theme .card-hover:hover{border-color:rgba(26,108,246,0.4);box-shadow:0 8px 30px rgba(0,0,0,0.1)}

.container{max-width:90%!important}

#back-to-top{position:fixed;bottom:100px;right:24px;z-index:40;width:44px;height:44px;border-radius:9999px;background-color:#1a6cf6;color:#000;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(26,108,246,0.3);opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s ease;cursor:pointer;border:none}
#back-to-top.show{opacity:1;visibility:visible;transform:translateY(0)}
#back-to-top:hover{background-color:#7dd3fc;transform:translateY(-3px);box-shadow:0 6px 25px rgba(26,108,246,0.4)}

.service-card-icon{width:1.5rem;height:1.5rem;color:#1a6cf6;margin-bottom:0.5rem;display:inline-block}
.service-menu-icon{font-size:1rem;color:#f59e0b;margin-right:0.5rem;display:inline-block;vertical-align:middle;width:1.25rem;text-align:center}

.faq-accordion summary{list-style:none}
.faq-accordion summary::-webkit-details-marker{display:none}
.faq-accordion details[open] .faq-chevron{transform:rotate(180deg)}
.faq-accordion .faq-content{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.faq-accordion details[open] .faq-content{max-height:500px}

.light-theme .bg-dark{background-color:#0b1120}
.light-theme .bg-dark-accent{background-color:#0b1120}
.light-theme .text-gray-400{color:#64748b}
.light-theme .text-gray-300{color:#475569}
.light-theme .text-gray-500{color:#94a3b8}
.light-theme .border-white\/5{border-color:rgba(0,0,0,0.06)}
.light-theme .border-white\/10{border-color:rgba(0,0,0,0.08)}
.light-theme .border-white\/20{border-color:rgba(0,0,0,0.1)}
.light-theme .bg-white\/5{background-color:rgba(26,108,246,0.04)}
.light-theme .bg-black\/40{background-color:rgba(26,108,246,0.03)}
.light-theme .bg-dark-accent\/30{background-color:rgba(26,108,246,0.04)}
.light-theme .bg-dark-accent\/20{background-color:rgba(26,108,246,0.03)}
.light-theme .bg-dark-accent\/10{background-color:rgba(26,108,246,0.02)}
.light-theme .bg-black{background-color:#0b1120}

.floating{animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0px)}50%{transform:translateY(-10px)}}
.floating-delay-1{animation-delay:0.5s}
.floating-delay-2{animation-delay:1s}
.floating-delay-3{animation-delay:1.5s}

.heading-reveal .char{display:inline-block;opacity:0;transform:translateY(20px);animation:charReveal 0.4s ease forwards}
.heading-reveal .word{display:inline-block;white-space:nowrap}
@keyframes charReveal{to{opacity:1;transform:translateY(0)}}

.cta-brand-blue{background-color:#1a6cf6;color:#fff}
.cta-brand-blue h2,.cta-brand-blue h3,.cta-brand-blue .heading{color:#fff}
.cta-brand-blue p{color:rgba(255,255,255,0.75)}
.cta-brand-blue .btn-cta{background-color:#000;color:#fff}
.cta-brand-blue .btn-cta:hover{background-color:#1f2937}
.cta-brand-blue .btn-cta-outline{border:2px solid #fff;color:#fff}
.cta-brand-blue .btn-cta-outline:hover{background-color:#fff;color:#000}

.light-theme inner-page-hero{background:linear-gradient(to bottom,rgba(26,108,246,0.08),#f8fafc)}

.ticker-track{display:flex;gap:4rem;align-items:center;white-space:nowrap;width:max-content;animation:tickerScroll 45s linear infinite}
@keyframes tickerScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

.gradient-word{display:inline-block;transition:transform 0.2s ease}
.gradient-word:hover{transform:scale(1.05)}


