:root{
  --bg0:#050712;
  --bg1:#0A1022;

  --card:rgba(255,255,255,.07);
  --card2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12);

  --text:#ffffff;
  --soft:rgba(255,255,255,.84);
  --soft2:rgba(255,255,255,.72);
  --soft3:rgba(255,255,255,.62);

  --brand:#5B7CFF;
  --brand2:#22D3EE;
  --brand3:#A78BFA;

  --shadow:0 22px 70px rgba(0,0,0,.38);
  --shadow2:0 14px 40px rgba(0,0,0,.28);

  --radius:18px;
  --radius2:22px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background:
    radial-gradient(1100px 700px at 15% 10%, rgba(91,124,255,.22), transparent 60%),
    radial-gradient(900px 650px at 85% 20%, rgba(34,211,238,.16), transparent 55%),
    radial-gradient(900px 700px at 50% 85%, rgba(167,139,250,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  padding-top: 76px;
}

/* Force readability for Bootstrap text-muted too */
.text-muted{ color: var(--soft2) !important; }
.text-secondary{ color: var(--soft2) !important; }
.text-white-75{ color: var(--soft) !important; }
.text-soft{ color: var(--soft2) !important; }

a{ color: rgba(255,255,255,.92); }
a:hover{ color: #fff; }

.skip-link{
  position:absolute;
  left:-999px;
  top: 10px;
  padding:10px 14px;
  background:#fff;
  color:#000;
  border-radius: 12px;
  z-index: 9999;
}
.skip-link:focus{ left: 10px; }

.section-pad{ padding: 84px 0; }
@media (max-width: 991px){
  .section-pad{ padding: 64px 0; }
}

.section-soft{
  background:
    radial-gradient(900px 450px at 20% 20%, rgba(91,124,255,.12), transparent 55%),
    radial-gradient(900px 450px at 80% 40%, rgba(34,211,238,.10), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border-top: 1px solid rgba(255,255,255,.07);
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.section-title{
  letter-spacing: -0.02em;
  font-weight: 900;
  color: #fff;
}

/* NAVBAR */
.glass-nav{
  background: rgba(6,10,22,.62);
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.glass-nav.nav-scrolled{
  box-shadow: 0 16px 44px rgba(0,0,0,.32);
  border-bottom-color: rgba(255,255,255,.14);
}

.navbar-brand .brand-mark{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(91,124,255,.30), rgba(34,211,238,.22));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 34px rgba(0,0,0,.30);
}
.brand-text{ font-weight: 900; letter-spacing: -0.02em; }

.nav-link{
  color: rgba(255,255,255,.78) !important;
}
.nav-link:hover{
  color:#fff !important;
}
.nav-link.active{
  color:#fff !important;
  text-shadow: 0 0 24px rgba(34,211,238,.18);
}

/* BUTTONS */
.btn-cta{
  box-shadow: 0 18px 44px rgba(91,124,255,.20);
}
.btn, .form-control, .form-select {
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }

/* HERO */
.hero-section{
  padding: 100px 0 48px;
  position: relative;
}
@media (max-width: 991px){
  .hero-section{ padding: 72px 0 38px; }
}

.hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .98;
}
.orb{
  position:absolute;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  filter: blur(34px);
  opacity:.30;
  animation: floaty 9s ease-in-out infinite;
}
.orb-1{ left:-220px; top:-180px; background: radial-gradient(circle at 30% 30%, rgba(91,124,255,.95), transparent 60%); }
.orb-2{ right:-240px; top:-120px; background: radial-gradient(circle at 30% 30%, rgba(34,211,238,.88), transparent 60%); animation-duration: 11s; }
.orb-3{ right:10%; bottom:-320px; width: 700px; height: 700px; opacity:.24; background: radial-gradient(circle at 30% 30%, rgba(167,139,250,.70), transparent 60%); animation-duration: 13s; }

@keyframes floaty{
  0%,100%{ transform: translateY(0px) translateX(0px); }
  50%{ transform: translateY(16px) translateX(10px); }
}

.grid-glow{
  position:absolute;
  inset:-1px;
  background-image:
    radial-gradient(520px 320px at 25% 10%, rgba(255,255,255,.07), transparent 60%),
    radial-gradient(640px 440px at 75% 10%, rgba(255,255,255,.06), transparent 60%),
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: auto, auto, 54px 54px, 54px 54px;
  mask-image: radial-gradient(circle at 50% 30%, rgba(0,0,0,1), transparent 65%);
  opacity: .55;
}

.hero-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  position: relative;
  overflow:hidden;
}
.hero-pill::after{
  content:"";
  position:absolute;
  inset:-40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: rotate(15deg);
  animation: shimmer 3.4s ease-in-out infinite;
  opacity:.55;
}
@keyframes shimmer{
  0%{ transform: translateX(-40%) rotate(15deg); }
  50%{ transform: translateX(40%) rotate(15deg); }
  100%{ transform: translateX(120%) rotate(15deg); }
}

.hero-proof .proof-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.90);
}

.hero-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.09);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  padding: 22px;
  position: relative;
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(600px 240px at 18% 0%, rgba(91,124,255,.20), transparent 55%),
    radial-gradient(600px 240px at 82% 0%, rgba(34,211,238,.18), transparent 55%),
    radial-gradient(520px 220px at 50% 100%, rgba(167,139,250,.12), transparent 58%);
  pointer-events:none;
  opacity:.92;
}
.hero-card::before{
  content:"";
  position:absolute;
  top:-120px;
  left:-120px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 60%);
  filter: blur(10px);
  opacity:.55;
  animation: pulseGlow 5.2s ease-in-out infinite;
}
@keyframes pulseGlow{
  0%,100%{ transform: scale(1); opacity:.50; }
  50%{ transform: scale(1.2); opacity:.70; }
}
.hero-card > *{ position: relative; z-index: 1; }

.badge-live{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(34,211,238,.12);
  border: 1px solid rgba(34,211,238,.24);
  color: rgba(255,255,255,.96);
}
.badge-live .dot{
  width:8px;
  height:8px;
  border-radius: 50%;
  background: #22D3EE;
  box-shadow: 0 0 0 6px rgba(34,211,238,.18);
}

.mini-metrics{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 520px){
  .mini-metrics{ grid-template-columns: 1fr; }
}
.mini-metric{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  padding: 12px 14px;
}
.mini-metric .label{ color: rgba(255,255,255,.76); font-size: .85rem; }
.mini-metric .value{ font-weight: 900; font-size: 1.2rem; color:#fff; }

.hero-card-divider{ height:1px; background: rgba(255,255,255,.14); }
.hero-checklist li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color: rgba(255,255,255,.90);
  margin-bottom: 10px;
}
.hero-checklist i{ color: rgba(34,211,238,.96); }
.hero-card-note{ color: rgba(255,255,255,.78); font-size:.92rem; }

.hero-bottom-fade{
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 44px;
  background: linear-gradient(to bottom, transparent, rgba(5,7,18,1));
  pointer-events:none;
}

/* TRUST BAR */
.trustbar-section{ padding: 22px 0 0; }
.trustbar{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--shadow2);
}
.trust-logos{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.logo-chip{
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.82);
  font-size:.9rem;
}
.stat-card{
  padding: 12px;
  border-radius: 16px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  text-align:center;
}
.stat-num{ font-weight: 900; color:#fff; font-size: 1.05rem; }
.stat-label{ color: rgba(255,255,255,.78); font-size:.85rem; }
.stat-footnote{ margin-top: 10px; color: rgba(255,255,255,.72); font-size: .92rem; }

/* CARDS */
.story-card{
  display:flex;
  gap:12px;
  padding: 14px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.story-card .icon{
  width:42px;
  height:42px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(91,124,255,.18);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
}

.solution-panel{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: var(--shadow);
  padding: 22px;
}
.badge-soft{
  display:inline-flex;
  align-items:center;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(91,124,255,.18);
  border: 1px solid rgba(91,124,255,.26);
  color: rgba(255,255,255,.96);
}
.solution-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 560px){
  .solution-grid{ grid-template-columns: 1fr; }
}
.solution-item{
  display:flex;
  gap:12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.12);
}
.solution-item i{
  font-size: 1.25rem;
  color: rgba(34,211,238,.96);
  margin-top: 1px;
}

/* Services */
.service-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  height: 100%;
  box-shadow: 0 12px 34px rgba(0,0,0,.22);
  position: relative;
  overflow:hidden;
}
.service-card:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
}
.service-icon{
  width: 46px;
  height: 46px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: linear-gradient(135deg, rgba(91,124,255,.26), rgba(34,211,238,.18));
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size: 1.2rem;
}

/* How */
.how-note{
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
}
.how-steps{ display:flex; flex-direction: column; gap: 12px; }
.how-step{
  display:flex;
  gap:12px;
  padding: 14px;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.step-num{
  width: 38px;
  height: 38px;
  display:grid;
  place-items:center;
  border-radius: 14px;
  background: rgba(34,211,238,.14);
  border: 1px solid rgba(34,211,238,.26);
  color:#fff;
  font-weight: 900;
}

/* Pricing */
.price-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 20px;
  height: 100%;
  box-shadow: 0 12px 38px rgba(0,0,0,.24);
  position: relative;
  overflow:hidden;
}
.price-head .plan-name{ font-weight: 900; color:#fff; font-size: 1.05rem; }
.plan-price{ font-weight: 950; font-size: 2.0rem; color:#fff; margin-top: 8px; }
.plan-sub{ margin-top: 6px; color: rgba(255,255,255,.82); }
.plan-list{
  margin: 18px 0;
  padding:0;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.plan-list li{ display:flex; gap:10px; color: rgba(255,255,255,.88); }
.plan-list i{ color: rgba(34,211,238,.96); margin-top: 2px; }

.price-featured{
  background: linear-gradient(180deg, rgba(91,124,255,.34), rgba(34,211,238,.18));
  border-color: rgba(255,255,255,.18);
  box-shadow: 0 26px 76px rgba(0,0,0,.40);
}
.featured-badge{
  position:absolute;
  top: 16px;
  right: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.20);
  color:#fff;
  font-weight: 800;
  font-size: .9rem;
}

.pricing-foot{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  color: rgba(255,255,255,.82);
}

/* Testimonials */
.testimonial-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 18px;
  height: 100%;
}
.stars i{ color: rgba(255,215,110,.96); }
.avatar{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:grid;
  place-items:center;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.12);
  color:#fff;
}

/* Accordion */
.accordion-item{
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px !important;
  overflow:hidden;
}
.accordion-item + .accordion-item{ margin-top: 12px; }
.accordion-button{
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.95);
}
.accordion-button:not(.collapsed){
  background: rgba(91,124,255,.22);
  color:#fff;
}
.accordion-body{
  color: rgba(255,255,255,.90);
  background: rgba(0,0,0,.14);
}

/* Final CTA */
.final-cta{ padding: 0 0 66px; }
.final-cta-inner{
  border-radius: var(--radius2);
  padding: 28px;
  background:
    radial-gradient(900px 260px at 30% 0%, rgba(91,124,255,.38), transparent 55%),
    radial-gradient(900px 260px at 80% 0%, rgba(34,211,238,.26), transparent 55%),
    rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: var(--shadow);
}

/* Contact */
.contact-card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  padding: 20px;
  box-shadow: 0 12px 38px rgba(0,0,0,.24);
}
.form-label{ color: rgba(255,255,255,.92); }
.form-control, .form-select{
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.96);
  border-radius: 14px;
}
.form-control::placeholder{
  color: rgba(255,255,255,.55);
}
.form-control:focus, .form-select:focus{
  border-color: rgba(34,211,238,.42);
  box-shadow: 0 0 0 .25rem rgba(34,211,238,.14);
  background: rgba(0,0,0,.24);
  color:#fff;
}
.form-hint{
  margin-top: 8px;
  color: rgba(255,255,255,.76);
  font-size: .92rem;
}
.contact-side{ display:flex; flex-direction: column; gap: 12px; }
.contact-side-item{
  display:flex;
  gap:12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
}
.contact-side-item i{
  font-size: 1.25rem;
  color: rgba(34,211,238,.96);
  margin-top: 2px;
}

/* Footer */
.site-footer{
  padding: 46px 0 28px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.14);
}
.footer-title{ font-weight: 900; margin-bottom: 10px; color: rgba(255,255,255,.96); }
.footer-links{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction: column;
  gap: 8px;
}
.footer-links a{ color: rgba(255,255,255,.78); text-decoration:none; }
.footer-links a:hover{ color:#fff; }

.trust-badges{ display:flex; flex-wrap: wrap; gap: 10px; }
.trust-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.86);
  font-size: .9rem;
}
.footer-mini{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.84);
}

/* Reveal animations */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Premium border glow */
.service-card, .price-card, .testimonial-card, .solution-panel, .contact-card, .trustbar {
  position: relative;
}
.service-card::before,
.price-card::before,
.testimonial-card::before,
.solution-panel::before,
.contact-card::before,
.trustbar::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  pointer-events:none;
  padding: 1px;
  background: linear-gradient(135deg, rgba(91,124,255,.22), rgba(34,211,238,.16), rgba(255,255,255,.08));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: .55;
}

/* Cursor glow (JS controls position) */
.cursor-glow{
  position: fixed;
  left: 0;
  top: 0;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at center,
    rgba(34,211,238,.14),
    rgba(91,124,255,.10),
    transparent 62%);
  filter: blur(14px);
  transform: translate(-50%, -50%);
  opacity: .75;
  z-index: 0;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  .orb{ animation: none; }
  .reveal{ transition: none; transform:none; opacity:1; }
  .btn, .form-control, .form-select{ transition:none; }
  .cursor-glow{ display:none; }
  .hero-pill::after{ animation:none; }
}