/* ========== Variables & Base ========== */
:root{
  --ud-primary:#5B8DEF;   /* blue */
  --ud-primary-600:#3B6DDF;
  --ud-dark:#0F172A;      /* slate-900 */
  --ud-deep:#111827;      /* gray-900 */
  --ud-muted:#64748B;     /* slate-500 */
  --ud-accent:#F59E0B;    /* amber */
  --ud-light:#F8FAFC;     /* slate-50 */
  --ud-success:#10B981;   /* emerald */
  --shadow-soft:0 10px 30px rgba(15,23,42,.08);
  --nav-offset-desktop: 74px;
  --nav-offset-mobile: 64px;
}

html { scroll-behavior: smooth; }
body{ font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; color: var(--ud-dark); }

/* Anchors offset so content isn't hidden behind sticky navbar */
header[id], section[id] { scroll-margin-top: calc(var(--nav-offset-desktop) + 12px); }
@media (max-width: 991.98px){
  header[id], section[id] { scroll-margin-top: calc(var(--nav-offset-mobile) + 12px); }
}

/* Topbar */
.topbar{ background: var(--ud-dark); color:#fff; font-size:.9rem; }
.topbar a{ color:#fff; text-decoration:none; }

/* Navbar */
.navbar{ box-shadow: 0 1px 0 rgba(148,163,184,.2); }
.navbar.sticky{ position:sticky; top:0; z-index:1030; backdrop-filter: saturate(180%) blur(8px); background:rgba(255,255,255,.92)!important; }
.brand-logo{ font-weight:800; letter-spacing: .5px; }
.brand-logo span{ color: var(--ud-primary); }

/* Hero */
.hero{
  position: relative; overflow:hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(91,141,239,.25), transparent),
              radial-gradient(800px 400px at -10% 10%, rgba(16,185,129,.12), transparent), #fff;
}
.hero .badge{ background: rgba(91,141,239,.12); color: var(--ud-primary-600); }
.hero-blob{
  position:absolute; right:-180px; top:-120px; width:520px; height:520px; background:linear-gradient(135deg, var(--ud-primary), #8E9DFE);
  filter: blur(60px); opacity:.35; border-radius: 50%; pointer-events:none;
}
.shadow-soft{ box-shadow: var(--shadow-soft); }
.btn-ud{ background: var(--ud-primary); color:#fff; border:none; }
.btn-ud:hover{ background: var(--ud-primary-600); color:#fff; }
.btn-outline-ud{ border-color: var(--ud-primary); color: var(--ud-primary); }
.btn-outline-ud:hover{ background: var(--ud-primary); color:#fff; }

/* Sections */
.section-title{ font-weight:800; letter-spacing:-.02em; }
.section-sub{ color: var(--ud-muted); }

/* Cards */
.service-card{ transition:.25s ease; border:1px solid rgba(148,163,184,.25); }
.service-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); border-color: rgba(148,163,184,.45); }
.icon-circle{ width:56px; height:56px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:#EEF2FF; color:var(--ud-primary); }

/* Process */
.step{ position:relative; }
.step:before{ content:""; position:absolute; left:28px; top:0; bottom:-1.5rem; width:2px; background:rgba(148,163,184,.35); }
.step:last-child:before{ display:none; }

/* Testimonials */
.testi{ background: linear-gradient(180deg, #fff, #F5F7FB); }

/* Footer */
.footer{ background: #0b1220; color:#cbd5e1; }
.footer a{ color:#cbd5e1; text-decoration:none; }
.footer a:hover{ color:#fff; }
.footer-badges img{ height:40px; width:auto; }
.footer-badges i{ font-size:40px; line-height:1; }

/* Offcanvas nav tweaks */
.offcanvas{ --bs-offcanvas-width: 310px; }

/* Floating actions */
.floating-whatsapp{
  position:fixed; right:18px; bottom:18px; z-index:1040; display:flex; align-items:center; gap:.5rem;
  background:#25D366; color:#fff; padding:.75rem 1rem; border-radius:999px; box-shadow:0 10px 30px rgba(37,211,102,.35);
}
.floating-whatsapp:hover{ color:#fff; opacity:.9; }

/* Small utilities */
.logo-mark{ width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,var(--ud-primary),#8E9DFE); display:inline-flex; align-items:center; justify-content:center; color:#fff; font-weight:800; }
.bg-light-gradient{ background:linear-gradient(180deg,#ffffff, #f7f9fc); }

/* Spacing utilities */
.py-6{ padding-top: 3.5rem; padding-bottom: 3.5rem; }
.py-7{ padding-top: 5rem;   padding-bottom: 5rem; }

/* Responsive tweaks */
@media (max-width: 991px){
  .hero h1{ font-size: 2rem; }
}