:root{
  --bg:#0f1220;
  --panel:#111428cc;
  --soft:#f6f8fb;

  --ink:#0b1220;
  --heading:#0b1220;

  --muted:#6b7385;
  --muted-dark:#aab2d6;

  --brand:#6C63FF;
  --brand-2:#0A66C2;
  --brand-3:#22C55E;

  --rad:22px;
  --glass:rgba(255,255,255,.06);
  --border-color:rgba(255,255,255,.12);
  --border:1px solid var(--border-color);

  --shadow-sm:0 10px 24px rgba(0,0,0,.08);
  --shadow-md:0 18px 48px rgba(0,0,0,.12);
  --shadow-lg:0 28px 80px rgba(0,0,0,.16);

  --ring:0 0 0 .25rem rgba(108,99,255,.18);

  --container-max:1160px;
}

[data-theme="dark"]{
  color-scheme: dark;
  --heading:#eaf0ff;
  --muted:var(--muted-dark);
}
[data-theme="dark"] body{ background:var(--bg); color:#eef1ff }

/* -------------------------
   Base
-------------------------- */
html,body{ scroll-behavior:smooth }
body{
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
.container{ max-width:var(--container-max) }
.fw-800{ font-weight:800 }
h1,h2,h3,h4,h5,h6{ color:var(--heading) }
a{ color:inherit }

::selection{ background:rgba(108,99,255,.22) }

/* Muted utilities always token-based */
.text-muted{ color:var(--muted) !important; opacity:1 }
.small, small{ color:var(--muted) }

/* Reduce motion support */
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important }
}

/* -------------------------
   Superbar (Header)
-------------------------- */
.superbar-xl{
  background:linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.9));
  backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 24px 60px rgba(16,22,60,.12);
  transition:height .25s ease, box-shadow .25s ease, transform .25s ease;
}
[data-theme="dark"] .superbar-xl{
  background:linear-gradient(180deg, rgba(17,20,40,.92), rgba(17,20,40,.86));
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.superbar__wrap{
  height:108px;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:18px;
}
.superbar__glow{
  height:18px;
  filter:blur(18px);
  opacity:.7;
  background:radial-gradient(60% 100% at 50% 0%, rgba(108,99,255,.35), transparent 70%);
}
.superbar__stripe{
  height:7px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  box-shadow:0 8px 24px rgba(108,99,255,.35) inset;
}

/* shrink on scroll (script.js toggles .is-shrunk) */
.superbar-xl.is-shrunk .superbar__wrap{ height:86px }
.superbar-xl.is-shrunk{ box-shadow:0 16px 40px rgba(0,0,0,.18) }

/* Brand */
.brand{ text-decoration:none }
.brand__badge{
  display:grid; place-items:center;
  width:50px; height:50px;
  border-radius:16px;
  background:conic-gradient(from 180deg, var(--brand), var(--brand-2), var(--brand));
  color:#fff; font-weight:800; font-size:1.25rem;
  box-shadow:0 12px 28px rgba(108,99,255,.45);
  position:relative; overflow:hidden;
}
.brand__badge::after{
  content:"";
  position:absolute; inset:-50% -50% auto auto;
  width:120%; height:120%;
  background:radial-gradient(circle at 30% 30%, rgba(255,255,255,.45), transparent 50%);
  transform:rotate(25deg);
}
.brand__text{ font-size:1.35rem; margin-left:.65rem; color:inherit }

/* Nav */
.supernav{ display:flex; align-items:center; justify-content:flex-end }
.supernav .burger{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  font-size:1.35rem;
  box-shadow:0 10px 24px rgba(0,0,0,.04);
}
[data-theme="dark"] .supernav .burger{
  background:#161a30;
  border:1px solid rgba(255,255,255,.14);
  color:#dbe0ff;
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.supernav #mainNav{ gap:14px }
@media (min-width:992px){
  .supernav .burger{ display:none }
  .supernav #mainNav{ display:flex !important }
}
.supernav__link{
  --pad:18px;
  position:relative;
  display:inline-flex;
  align-items:center;
  height:52px;
  padding:0 var(--pad);
  border-radius:16px;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
  outline:none;
}
.supernav__link span{ position:relative; z-index:2 }
.supernav__link::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(135deg, rgba(108,99,255,.14), rgba(10,102,194,.14));
  opacity:0;
  transition:opacity .25s ease;
}
.supernav__link:hover::before{ opacity:1 }
.supernav__link::after{
  content:"";
  position:absolute;
  left:16px; right:16px;
  bottom:7px;
  height:4px;
  border-radius:4px;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.supernav__link:hover::after,
.supernav__link.active::after{ transform:scaleX(1) }

.supernav__link:focus-visible{
  box-shadow:var(--ring);
}

/* CTA */
.supercta{ display:flex; align-items:center; gap:14px }
.btn-icon{
  border:1px solid rgba(0,0,0,.10);
  border-radius:14px;
  padding:12px 14px;
  background:transparent;
}
[data-theme="dark"] .btn-icon{
  border:1px solid rgba(255,255,255,.14);
  color:#d8ddff;
}
.btn-cta{
  position:relative; overflow:hidden;
  border:0; border-radius:16px;
  padding:.95rem 1.35rem;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff; font-weight:800;
  box-shadow:0 16px 40px rgba(108,99,255,.35);
}
.btn-cta::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at var(--mx,30%) var(--my,30%), rgba(255,255,255,.25), transparent 42%);
  transform:scale(0);
  transition:transform .25s ease;
}
.btn-cta:hover::before{ transform:scale(1) }
.btn-cta .pulse{
  position:absolute; inset:auto 10px 10px auto;
  width:12px; height:12px;
  border-radius:999px;
  background:#fff;
  animation:pulse 1.6s ease infinite;
}
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(255,255,255,.55) }
  100%{ box-shadow:0 0 0 14px rgba(255,255,255,0) }
}

/* Mobile nav dropdown polish (fits your index.html inline too) */
@media (max-width: 991.98px){
  #mainNav{
    margin-top:10px;
    padding:12px;
    border-radius:16px;
    background:rgba(255,255,255,.85);
    border:1px solid rgba(0,0,0,.06);
    box-shadow:var(--shadow-sm);
  }
  [data-theme="dark"] #mainNav{
    background:rgba(17,20,40,.92);
    border:1px solid rgba(255,255,255,.14);
    box-shadow:0 16px 40px rgba(0,0,0,.35);
  }
  .supernav__link{ width:100%; justify-content:flex-start }
}

/* -------------------------
   Hero
-------------------------- */
.hero{
  position:relative;
  padding:96px 0 64px;
  min-height:100svh;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.hero .container{ width:100% }

.blob{ position:absolute; filter:blur(70px); pointer-events:none; opacity:.35 }
.blob-1{
  width:460px; height:460px; border-radius:999px;
  right:-110px; top:-80px;
  background:radial-gradient(closest-side,var(--brand),transparent 72%);
}
.blob-2{
  width:420px; height:420px; border-radius:999px;
  left:-120px; bottom:-140px;
  background:radial-gradient(closest-side,var(--brand-2),transparent 72%);
}

.grad-text{
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* Hero Metrics */
.hero-metrics{ display:flex; gap:20px; flex-wrap:wrap }
.metric{ display:flex; flex-direction:column; align-items:flex-start }
.metric .count{ font-size:38px; font-weight:800; line-height:1; letter-spacing:-.02em }
.metric small{ color:var(--muted); margin-top:6px }

/* Hero Media */
.hero-media-col{ display:grid; place-items:center }
.hero-media{
  position:relative;
  border-radius:var(--rad);
  overflow:hidden;
  background:#fff;
  aspect-ratio:16 / 10;
  box-shadow:var(--shadow-lg);
  border:1px solid rgba(0,0,0,.06);
  margin-inline:auto;
  max-width:760px;
  width:100%;
}
.hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.10));
  opacity:.35;
  pointer-events:none;
}
.hero-media img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}
[data-theme="dark"] .hero-media{
  background:#0a0a0a;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 30px 90px rgba(0,0,0,.55);
}
@media (max-width:991.98px){
  .hero{ padding-top:72px; padding-bottom:56px; min-height:auto }
}

/* -------------------------
   Sections
-------------------------- */
.section{ padding:88px 0 }
.bg-soft{ background:#f7f9fc }
[data-theme="dark"] .bg-soft{ background:#0f1426 }

/* -------------------------
   Glass Cards (system)
-------------------------- */
.card.glass{
  background:rgba(255,255,255,.62);
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(10,102,194,.07);
}
[data-theme="dark"] .card.glass{
  background:var(--glass);
  border:var(--border);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}

/* Service icon */
.service-icon{
  width:58px; height:58px;
  display:grid; place-items:center;
  border-radius:16px;
  margin-bottom:14px;
  font-size:26px;
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 10px 22px rgba(108,99,255,.32);
}

/* checklist style (your HTML uses <ul class="checklist">) */
.checklist{
  list-style:none;
  padding-left:0;
  margin:14px 0 0 0;
  display:grid;
  gap:10px;
}
.checklist li{
  position:relative;
  padding-left:28px;
  line-height:1.45;
  color:inherit;
}
.checklist li::before{
  content:"";
  position:absolute;
  left:0; top:.3rem;
  width:18px; height:18px;
  border-radius:999px;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  box-shadow:0 8px 16px rgba(108,99,255,.25);
}
.checklist li::after{
  content:"";
  position:absolute;
  left:6px; top:.62rem;
  width:6px; height:3px;
  border-left:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(-45deg);
}

/* highlight bar */
.highlight-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  border-radius:18px;
  color:#fff;
  background:linear-gradient(90deg,var(--brand),var(--brand-2));
  box-shadow:0 18px 48px rgba(108,99,255,.18);
}
@media (max-width: 576px){
  .highlight-bar{ flex-direction:column; align-items:flex-start }
}
.btn-dark-soft{
  background:#0b1220;
  color:#fff;
  border:0;
  border-radius:12px;
  padding:10px 16px;
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
[data-theme="dark"] .btn-dark-soft{
  background:#191f35;
}

/* -------------------------
   Project Cards (Selected Work)
-------------------------- */
.proj-card{
  display:block;
  height:100%;
  text-decoration:none;
  border-radius:20px;
  padding:18px 18px 16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  color:inherit;
  position:relative;
  overflow:hidden;
}
.proj-card::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:radial-gradient(circle at 20% 10%, rgba(108,99,255,.22), transparent 40%);
  opacity:.0;
  transition:opacity .22s ease;
}
.proj-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(0,0,0,.10);
}
.proj-card:hover::before{ opacity:1 }
.proj-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
  position:relative;
  z-index:2;
}
.proj-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border-radius:999px;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  color:#fff;
  font-size:12px;
  font-weight:800;
}
.proj-stack{
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  background:#eef2ff;
  color:#2d2f7a;
}
.proj-title{ margin:0 0 6px 0; font-weight:900; letter-spacing:-.01em; position:relative; z-index:2 }
.proj-desc{ margin:0 0 12px 0; color:var(--muted); line-height:1.55; position:relative; z-index:2 }
.proj-link{
  font-weight:800;
  display:inline-flex;
  gap:6px;
  align-items:center;
  position:relative;
  z-index:2;
}
.proj-card.is-muted{ opacity:.86 }

[data-theme="dark"] .proj-card{
  background:var(--panel);
  border:var(--border);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}
[data-theme="dark"] .proj-stack{ background:#171b31; color:#dbe0ff }

/* -------------------------
   Why us: Pills + Quote + Stats
-------------------------- */
.pill-list{ list-style:none; padding:0; margin:0 }
.pill-list li{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.6);
}
[data-theme="dark"] .pill-list li{
  border:var(--border);
  background:rgba(255,255,255,.03);
}
.quote-card{
  border-radius:18px;
  padding:18px;
  border:1px dashed rgba(0,0,0,.14);
  background:rgba(255,255,255,.55);
}
.quote-card .bi{ font-size:1.2rem }
[data-theme="dark"] .quote-card{
  border-color:rgba(255,255,255,.18);
  background:rgba(255,255,255,.03);
}

.grid-2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}
@media (max-width:576px){
  .grid-2{ grid-template-columns:1fr }
}
.stat{
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.06);
  background:rgba(255,255,255,.6);
  box-shadow:0 10px 22px rgba(0,0,0,.04);
}
[data-theme="dark"] .stat{
  border:var(--border);
  background:rgba(255,255,255,.03);
  box-shadow:0 12px 34px rgba(0,0,0,.35);
}
.stat-num{ font-size:28px; font-weight:900; letter-spacing:-.02em }
.stat-label{ color:var(--muted) }

/* -------------------------
   Testimonials Grid (review-card)
-------------------------- */
.testimonials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
@media (max-width:992px){
  .testimonials{ grid-template-columns:1fr }
}

.review-card{
  position:relative;
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:18px;
  padding:20px 20px 16px;
  box-shadow:var(--shadow-sm);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}
.review-card::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:4px;
  border-radius:18px 18px 0 0;
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  opacity:.95;
}
.review-quote{
  margin:0;
  font-size:1.05rem;
  line-height:1.65;
}
.review-author{
  display:flex;
  align-items:center;
  gap:12px;
}
.review-author img{
  width:44px; height:44px;
  border-radius:999px;
  object-fit:cover;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}
.review-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-md);
  border-color:rgba(0,0,0,.10);
}
[data-theme="dark"] .review-card{
  background:var(--panel);
  border:var(--border);
  box-shadow:0 12px 34px rgba(0,0,0,.45);
}
[data-theme="dark"] .review-card:hover{
  box-shadow:0 20px 50px rgba(0,0,0,.60);
}

/* -------------------------
   Pricing Cards
-------------------------- */
.plan-badge{
  display:inline-block;
  padding:6px 12px;
  border-radius:999px;
  background:#eef2ff;
  color:#2d2f7a;
  font-weight:800;
  margin-bottom:10px;
}
[data-theme="dark"] .plan-badge{ background:#171b31; color:#dbe0ff }
.price{ font-weight:900; margin-bottom:10px; letter-spacing:-.02em }

.card.featured{
  border:2px solid transparent;
  background:linear-gradient(#fff,#fff) padding-box,
             linear-gradient(135deg,var(--brand),var(--brand-2)) border-box;
  box-shadow:0 22px 60px rgba(108,99,255,.16);
}
[data-theme="dark"] .card.featured{
  background:linear-gradient(var(--panel),var(--panel)) padding-box,
             linear-gradient(135deg,var(--brand),var(--brand-2)) border-box;
  box-shadow:0 26px 74px rgba(0,0,0,.55);
}

/* Pricing list readability in dark */
[data-theme="dark"] .card.glass .price,
[data-theme="dark"] .card.glass li{ color:#e6e9f5 }

/* -------------------------
   FAQ (Bootstrap Accordion polish)
-------------------------- */
.accordion-item{
  border-radius:16px !important;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06) !important;
  box-shadow:0 8px 22px rgba(0,0,0,.04);
  margin-bottom:12px;
}
.accordion-button{
  font-weight:800;
  border:0 !important;
}
.accordion-button:focus{ box-shadow:var(--ring) !important }
[data-theme="dark"] .accordion-item{
  border:var(--border) !important;
  background:rgba(255,255,255,.03);
  box-shadow:0 12px 34px rgba(0,0,0,.42);
}
[data-theme="dark"] .accordion-button{
  background:rgba(255,255,255,.03) !important;
  color:#e9edff !important;
}
[data-theme="dark"] .accordion-body{ color:#e9edff }

/* -------------------------
   Forms / Contact
-------------------------- */
.form-control,.form-select{
  border-radius:12px;
  padding:12px 14px;
}
.form-control:focus,.form-select:focus{
  box-shadow:var(--ring);
  border-color:#b6b1ff;
}
.btn-primary{
  background:linear-gradient(90deg, var(--brand), var(--brand-2));
  border:0;
  font-weight:800;
  box-shadow:0 14px 30px rgba(108,99,255,.18);
}
.btn-primary:hover{ filter:saturate(1.1) brightness(1.02) }
.btn-outline-primary{
  border-color:rgba(108,99,255,.45);
  font-weight:800;
}
.btn-outline-primary:hover{
  background:rgba(108,99,255,.10);
  border-color:rgba(108,99,255,.55);
}
.btn-success{
  font-weight:800;
  box-shadow:0 14px 30px rgba(34,197,94,.12);
}

/* Placeholder visibility in dark */
[data-theme="dark"] ::placeholder{ color:#9aa3b8; opacity:1 }

/* Contact section: dark-mode readability */
[data-theme="dark"] #contact .card.glass{ color:#e9edff }
[data-theme="dark"] #contact h5,
[data-theme="dark"] #contact .form-label,
[data-theme="dark"] #contact label,
[data-theme="dark"] #contact p,
[data-theme="dark"] #contact .small,
[data-theme="dark"] #contact small{
  color:#e9edff !important;
}
[data-theme="dark"] #contact .form-control,
[data-theme="dark"] #contact .form-select{
  color:#e9edff;
  background:#0f1426;
  border-color:rgba(255,255,255,.18);
}
[data-theme="dark"] #contact .form-control:focus,
[data-theme="dark"] #contact .form-select:focus{
  box-shadow:0 0 0 .25rem rgba(108,99,255,.25);
  border-color:#bfc6ff;
}
[data-theme="dark"] #contact ::placeholder{ color:#aab2d6; opacity:1 }
[data-theme="dark"] #contact .bi{ color:currentColor }
[data-theme="dark"] #contact option{ color:#0b1220; background:#ffffff }

/* -------------------------
   Footer
-------------------------- */
.footer{ padding:26px 0 }
.nav-link{ color:inherit; opacity:.78 }
.nav-link:hover{ opacity:1 }
[data-theme="dark"] .nav-link{ opacity:.9 }

/* -------------------------
   Floating Buttons
-------------------------- */
.btn-whatsapp,.btn-backtotop{
  position:fixed;
  right:16px;
  z-index:999;
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:0;
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.btn-whatsapp{
  bottom:16px;
  background:#25D366;
  color:#fff;
}
.btn-backtotop{
  bottom:74px;
  background:#0b1220;
  color:#fff;
  opacity:0;
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
  transform:translateY(6px);
}
.btn-backtotop.show{
  opacity:1;
  pointer-events:auto;
  transform:none;
}

/* -------------------------
   Reveal Animations (script.js uses .is-visible)
-------------------------- */
[data-reveal]{ opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease }
[data-reveal].is-visible{ opacity:1; transform:none }

/* -------------------------
   Extra: Better badge look on hero
-------------------------- */
.badge.text-bg-light.border{
  border-color:rgba(0,0,0,.08) !important;
  border-radius:999px;
  padding:.45rem .65rem;
  font-weight:800;
}
[data-theme="dark"] .badge.text-bg-light.border{
  background:#141a2f !important;
  border-color:rgba(255,255,255,.10) !important;
  color:#e9edff;
}

/* -------------------------
   Optional: smoother section headings
-------------------------- */
h2.fw-800{
  letter-spacing:-.02em;
}
.lead{ line-height:1.55 }

/* End */