:root{
  --brand-primary:#1d4ed8;
  --brand-secondary:#059669;
  --brand-dark:#0f172a;
}
html,body{overflow-x:hidden}
body{
  color:#0f172a;
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  font-size:16px;
  line-height:1.6;
}
/* Space for fixed header */
body { padding-top: 0; }
body:not(.on-hero) { padding-top: 76px; }
@media (min-width: 992px){
  body:not(.on-hero) { padding-top: 86px; } 
}
img,svg,video,iframe{max-width:100%;height:auto}
.toast{position:fixed;right:1rem;top:1rem;z-index:1060}
.brand-btn{background:var(--brand-primary);color:#fff;border-radius:.5rem;padding:.6rem 1.2rem;font-weight:600}
.brand-btn:hover{background:#1e40af;color:#fff}
.brand-outline{border:2px solid #cbd5e1;border-radius:.5rem;padding:.6rem 1.2rem;font-weight:600}
.brand-outline:hover{background:#f8fafc}
.brand-topbar{background:#0b1220;color:#cbd5e1;font-size:.9rem}
.brand-topbar a{color:#e2e8f0;text-decoration:none}
.brand-topbar a:hover{color:#fff}
.brand-navbar{backdrop-filter:saturate(180%) blur(12px);background-image:linear-gradient(90deg,#ffffffee,#ffffffee);border-bottom:1px solid #e2e8f0;transition:box-shadow .25s,height .25s,background .25s;z-index:1050}
.brand-navbar .accent-bar{height:3px;background:linear-gradient(90deg,#165DFF,#36D399,#f59e0b)}
.navbar-scrolled{box-shadow:0 10px 30px rgba(2,6,23,.08)}
.navbar-scrolled .navbar{background:#fff}
.brand-navbar .navbar.brand-nav{
  background:linear-gradient(135deg,#ffffffc8,#ffffffff);
  border:1px solid #e5e7eb;
  border-radius:14px;
  margin-top:0;
  padding:.25rem .75rem;
}
.brand-navbar .navbar.brand-nav .nav-link{
  border-radius:.6rem;
  transition:background-color .2s ease,color .2s ease;
}
.brand-navbar .navbar.brand-nav .nav-link:hover{
  background:#f1f5f9;
}
.brand-navbar .navbar.brand-nav .nav-link.active{
  background:linear-gradient(90deg,var(--brand-primary),#36D399);
  color:#fff!important;
}
.navbar .navbar-brand img{height:48px}
.navbar-scrolled .navbar .navbar-brand img{height:36px!important}
.partner-grid .partner-tile{
  position:relative;
  padding:18px;
  border:1px solid #e5e7eb;
  border-radius:14px;
  background:#ffffff;
  box-shadow:0 6px 16px rgba(2,6,23,.04);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.partner-grid .partner-logo{
  max-height:60px;
  width:100%;
  object-fit:contain;
  filter:grayscale(.9) saturate(.9) contrast(1.05);
  opacity:.85;
  transition:filter .2s ease,opacity .2s ease,transform .2s ease;
}
.partner-grid .partner-tile:hover .partner-logo{
  filter:none;
  opacity:1;
  transform:translateY(-1px) scale(1.04);
}
.partner-grid .partner-tile:hover{
  transform:translateY(-2px);
  border-color:#cbd5e1;
  box-shadow:0 10px 24px rgba(2,6,23,.08);
}
.partner-grid .partner-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  text-decoration:none;
}

.navbar-brand{animation:fadeSlide .6s ease both}
.navbar-nav .nav-item .nav-link{animation:fadeSlide .6s ease both}
.navbar-nav .nav-item:nth-child(1) .nav-link{animation-delay:.05s}
.navbar-nav .nav-item:nth-child(2) .nav-link{animation-delay:.1s}
.navbar-nav .nav-item:nth-child(3) .nav-link{animation-delay:.15s}
.navbar-nav .nav-item:nth-child(4) .nav-link{animation-delay:.2s}
.navbar-nav .nav-item:nth-child(5) .nav-link{animation-delay:.25s}
.navbar-nav .nav-item:nth-child(6) .nav-link{animation-delay:.3s}
.navbar-nav .nav-item:nth-child(7) .nav-link{animation-delay:.35s}
.brand-btn{transition:transform .15s ease}
.brand-btn:hover{transform:translateY(-1px)}
.offcanvas {
  --bs-offcanvas-bg: transparent;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
  border: 1px solid rgba(255,255,255,0.3);
}
.offcanvas .nav-link{
  color:#0f172a;
}
.offcanvas .nav-link:hover{
  color:var(--brand-primary);
}
.offcanvas .nav-link.active{
  color:var(--brand-primary)!important;
}
.card-shadow{box-shadow:0 6px 18px rgba(2,6,23,.06)}
.hero-stat{border:1px solid #e2e8f0;border-radius:.75rem;padding:1rem;text-align:center}
.section-title{font-weight:600}
.prose h1,.prose h2,.prose h3{margin-top:1.2em;margin-bottom:.6em}
.prose{max-width:72ch}
.prose h2{padding-left:.6rem;border-left:4px solid var(--brand-primary)}
.prose blockquote{border-left:4px solid #e2e8f0;padding:.5rem 1rem;color:#334155;background:#f8fafc;border-radius:.5rem}
.hero{position:relative;padding:0}
.hero::before{content:"";position:absolute;inset:0 0 auto 0;height:0}
.hero-carousel .hero-slide{min-height:560px;display:flex;align-items:center;position:relative;overflow:hidden}
.hero-carousel .hero-slide::before{
  content:"";
  position:absolute;
  top:-120px;right:-120px;
  width:460px;height:460px;border-radius:50%;
  background: radial-gradient(closest-side at 50% 50%, rgba(22,93,255,.16), transparent 70%);
  filter: blur(10px);
}
.hero-slide-1{background:linear-gradient(180deg,#f8fafc 0%,#fff 100%)}
.hero-slide-2{background:linear-gradient(180deg,#eef2ff 0%,#fff 100%)}
.hero-slide-3{background:linear-gradient(180deg,#f0fdf4 0%,#fff 100%)}
.hero-eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;color:#0f172a}
.hero-eyebrow::before{content:"";display:inline-block;width:28px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--brand-primary),#36D399)}
.hero-title{font-weight:800;letter-spacing:-.02em}
.hero-subtitle{color:#475569;max-width:60ch}
.carousel-indicators{gap:.5rem;margin-bottom:1rem}
.carousel-indicators [data-bs-target]{width:12px;height:12px;border-radius:999px;background-color:#94a3b8}
.carousel-indicators .active{background-color:var(--brand-primary);transform:scale(1.15)}
.hero-controls .carousel-control-prev,.hero-controls .carousel-control-next{
  width:48px;height:48px;border-radius:999px;background:rgba(2,6,23,.08);backdrop-filter:blur(8px);
  top:50%;transform:translateY(-50%);
}
.hero-controls .carousel-control-prev:hover,.hero-controls .carousel-control-next:hover{background:rgba(2,6,23,.12)}
.hero-media{
  position:relative;
  border-radius:22px;
  background: radial-gradient(120% 120% at 80% 20%, #ffffff 0%, #f1f5f9 60%, #e2e8f0 100%);
  border:1px solid #e5e7eb;
  box-shadow: 0 10px 30px rgba(2,6,23,.08), inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;
  aspect-ratio: 16 / 10;
}
.hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(60% 60% at 70% 30%, rgba(22,93,255,.10), transparent 60%),
    linear-gradient(120deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,0) 40%);
  pointer-events:none;
}
.hero-media-img{
  width:100%;
  height:100%;
  object-fit:contain;
  transform: translateZ(0);
  animation: floatY 6s ease-in-out infinite;
}
/* Accent ring behind image */
.hero-media::before{
  content:"";
  position:absolute;
  width:220px;height:220px;border-radius:50%;
  left:-50px;bottom:-50px;
  background: radial-gradient(closest-side, rgba(54,211,153,.25), transparent 70%);
  filter: blur(6px);
}

/* Slide-in animations for content */
.carousel-item .hero-title,
.carousel-item .hero-subtitle,
.carousel-item .hero-cta{opacity:0;transform:translateY(8px)}
.carousel-item.active .hero-title{animation:fadeUp .5s .1s ease both}
.carousel-item.active .hero-subtitle{animation:fadeUp .6s .2s ease both}
.carousel-item.active .hero-cta{animation:fadeUp .6s .3s ease both}

@media (min-width: 992px){
  .hero-carousel .hero-slide{min-height:720px}
  .hero-media{aspect-ratio: 16 / 9;}
}
@keyframes fadeSlide{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:translateY(0)}
}
@media (prefers-reduced-motion: reduce){
  .navbar-brand,.nav-link,.brand-btn{animation:none!important;transition:none!important}
}

.transition-all {
  transition: all 0.3s ease-in-out;
}
#siteHeader {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#siteHeader.navbar-scrolled {
  background-color: rgba(255, 255, 255, 0.98) !important;
  padding-top: 5px;
  padding-bottom: 5px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid transparent;
}
.nav-link {
  color: #334155;
  font-weight: 600;
  position: relative;
  padding: 0.5rem 0;
  margin: 0 0.5rem;
}
.nav-link:hover, .nav-link.active {
  color: var(--brand-primary);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background-color: var(--brand-primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
  transform-origin: left;
}
.nav-link:hover::after, .nav-link.active::after {
  transform: scaleX(1);
}
.nav-contact {
  color: #334155;
}
.nav-contact:hover {
  color: var(--brand-primary);
}
#siteHeader.navbar-scrolled .site-logo {
  transform: scale(0.9);
}

#siteHeader .navbar-toggler {
  color: #334155;
  outline: none;
}
#siteHeader .navbar-toggler:focus {
  box-shadow: none;
}

/* White text for transparent header on dark heroes (desktop only) */
@media (min-width: 992px) {
  body.on-hero #siteHeader:not(.navbar-scrolled) .nav-link,
  body.on-hero #siteHeader:not(.navbar-scrolled) .nav-contact {
    color: rgba(255, 255, 255, 0.9);
  }
  body.on-hero #siteHeader:not(.navbar-scrolled) .nav-link:hover,
  body.on-hero #siteHeader:not(.navbar-scrolled) .nav-link.active,
  body.on-hero #siteHeader:not(.navbar-scrolled) .nav-contact:hover {
    color: #fff;
  }
  body.on-hero #siteHeader:not(.navbar-scrolled) .nav-link::after {
    background-color: #fff;
  }
}
body.on-hero #siteHeader:not(.navbar-scrolled) .navbar-toggler {
  color: #fff;
}
body.on-hero #siteHeader:not(.navbar-scrolled) {
  background-color: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.on-hero #siteHeader:not(.navbar-scrolled) .site-logo {
  filter: brightness(0) invert(1);
}
.brand-tile{
  width:40px;height:40px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#3b82f6,#4f46e5);
  color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.brand-sub{
  color:#cbd5e1;letter-spacing:.08em;font-size:.75rem;text-transform:uppercase;
}
.brand-footer {
  margin-top: 4rem;
  background: var(--brand-dark);
  border-top: none;
  position: relative;
}
.footer-cta-inline {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.brand-footer .text-secondary {
  color: #94a3b8 !important;
}
.footer-heading {
  color: #f8fafc;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
}
.footer-heading-sm {
  color: #64748b;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
}
.footer-desc {
  font-size: 0.95rem;
  line-height: 1.7;
}
.footer-icon-box {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background 0.3s ease;
}
.footer-icon-box:hover {
  background: rgba(255, 255, 255, 0.1);
}
.footer-link {
  color: #94a3b8;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.footer-link:hover {
  color: #38bdf8;
  transform: translateX(4px);
}
.footer-link i {
  transition: transform 0.2s ease;
}
.footer-link:hover i {
  transform: translateX(2px);
}
.footer-brand-logo {
  height: 54px;
  width: auto;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3));
}
.footer-newsletter-form {
  position: relative;
}
.footer-newsletter-form .form-control {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #f8fafc;
  padding-right: 56px;
  border-radius: 12px;
  height: 52px;
}
.footer-newsletter-form .form-control:focus {
  background: rgba(255, 255, 255, 0.08);
  border-color: #38bdf8;
  box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.1);
}
.footer-newsletter-form .form-control::placeholder {
  color: #64748b;
}
.footer-newsletter-form .btn {
  position: absolute;
  right: 6px;
  top: 6px;
  bottom: 6px;
  border-radius: 8px;
  background: var(--brand-primary);
  border: none;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s;
  color: #fff;
}
.footer-newsletter-form .btn:hover {
  background: #2563eb;
}
.footer-social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-social-link:hover {
  background: var(--brand-primary);
  color: #fff;
  transform: translateY(-3px);
  border-color: var(--brand-primary);
  box-shadow: 0 10px 20px rgba(29, 78, 216, 0.3);
}
.footer-legal {
  background: rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  padding: 1.25rem 0;
}
.footer-legal-link {
  color: #64748b;
  text-decoration: none;
  transition: color 0.2s ease;
}
.footer-legal-link:hover {
  color: #e2e8f0;
}
/* Text justification for writeups */
p{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.prose p, .prose li{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.prose div{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.card .card-body p{ text-align:justify; text-justify:inter-word; hyphens:auto; }
.prose{max-width:72ch}
.prose h2{padding-left:.6rem;border-left:4px solid var(--brand-primary)}
.prose blockquote{border-left:4px solid #e2e8f0;padding:.5rem 1rem;color:#334155;background:#f8fafc;border-radius:.5rem}

/* Back to top button */
#backToTop{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:1060;
  width:44px;height:44px;
  display:none;
  align-items:center;justify-content:center;
  border-radius:999px;
  background:linear-gradient(135deg, var(--brand-primary), #36D399);
  color:#fff;
  border:none;
  box-shadow:0 6px 18px rgba(2,6,23,.2);
  cursor:pointer;
}
#backToTop.show{display:flex}
#backToTop:hover{transform:translateY(-2px);box-shadow:0 10px 28px rgba(2,6,23,.26)}

/* Bespoke Services section */
.services-section{
  background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);
  overflow:hidden;
}
.services-section .services-bg{
  position:absolute;inset:-20% -10% auto -10%;height:380px;
  background:
    radial-gradient(800px 200px at 20% 20%, rgba(22,93,255,.10), transparent 60%),
    radial-gradient(600px 220px at 80% 10%, rgba(54,211,153,.12), transparent 70%);
  filter: blur(6px);
  pointer-events:none;
}
.services-section .eyebrow{letter-spacing:.08em;color:#1d4ed8}
.service-card{
  display:block;
  text-decoration:none;
  border-radius:16px;
  background:#ffffff;
  border:1px solid #e5e7eb;
  box-shadow:0 8px 24px rgba(2,6,23,.06);
  transform:translateY(0) translateZ(0);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.service-card:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 36px rgba(2,6,23,.10);
  border-color:#d1d5db;
}
.service-card-inner{position:relative;padding:1rem}
.service-card-accent{
  position:absolute;inset:0;border-radius:16px;pointer-events:none;
  background:linear-gradient(135deg, rgba(29,78,216,.15), rgba(54,211,153,.15));
  opacity:.0;transition:opacity .25s ease;
}
.service-card:hover .service-card-accent{opacity:.25}
.service-icon{
  width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#e0e7ff,#d1fae5);color:#1d4ed8;font-size:1.2rem;flex:0 0 auto;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 14px rgba(2,6,23,.08);
}
.service-title{font-weight:700;color:#0f172a}
.service-desc{color:#475569}
.service-media{
  border-radius:12px;overflow:hidden;border:1px solid #e5e7eb;background:#f8fafc;
}
.service-media img{width:100%;height:180px;object-fit:cover;transform:scale(1.01)}
.service-cta{display:flex;align-items:center;gap:.5rem;color:#1d4ed8;font-weight:600}
.service-cta i{transition:transform .2s ease}
.service-card:hover .service-cta i{transform:translateX(4px)}

/* Reveal on scroll animations */
.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s cubic-bezier(.2,.6,.2,1), transform .6s cubic-bezier(.2,.6,.2,1);
}
.reveal.reveal-in{
  opacity:1;
  transform:translateY(0);
}