:root{--bg:#0b1220;--fg:#0b1220;}
body{font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background:linear-gradient(180deg,#f7f8fb 0%,#ffffff 40%);}
.navbar{background:rgba(11,18,32,.92);backdrop-filter:saturate(160%) blur(6px);}
.navbar .nav-link,.navbar .navbar-brand{color:#fff!important;}
.navbar .btn.btn-light{border-radius:12px;}
.small-muted{color:#6c757d;font-size:.92rem;}
.hero{padding:22px;border-radius:18px;background:linear-gradient(135deg,#0b1220 0%,#243b6b 55%, #0b1220 100%);color:#fff;position:relative;overflow:hidden;}
.hero:before{content:"";position:absolute;inset:-2px;background: radial-gradient(600px 220px at 10% 10%, rgba(59,130,246,.35), transparent 60%), radial-gradient(520px 220px at 90% 30%, rgba(168,85,247,.25), transparent 60%);pointer-events:none;}
.card{border-radius:18px;box-shadow:0 6px 24px rgba(11,18,32,.06);border:1px solid rgba(0,0,0,.06)}
.wa-float{position:fixed;right:18px;bottom:18px;z-index:9999;background:#25D366;color:#fff;text-decoration:none;padding:12px 14px;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.18);font-weight:700}
.wa-float span{margin-left:6px}
.ai-widget{border:1px dashed rgba(0,0,0,.18);border-radius:16px;background:rgba(255,255,255,.8)}
.ai-head{display:flex;align-items:center;justify-content:space-between;gap:10px}

/* Premium landing skin alignment */
.hero{ border:1px solid rgba(255,255,255,.10); box-shadow: 0 18px 42px rgba(0,0,0,.18); }
.hero .badge{ background: linear-gradient(135deg, rgba(59,130,246,1), rgba(168,85,247,1)); border:1px solid rgba(255,255,255,.16); }
.service-card{ border-radius: 20px!important; border:1px solid rgba(15,23,42,.08)!important; }
.service-card:hover{ transform: translateY(-4px); transition: transform .18s ease, box-shadow .18s ease; box-shadow: 0 20px 60px rgba(15, 23, 42, .14); }


/* Animated SaaS hero */
.hero.hero-animated{
  background-size: 220% 220%;
  animation: heroShift 9s ease-in-out infinite;
}
.hero.hero-animated:after{
  content:"";
  position:absolute; inset:-40%;
  background: conic-gradient(from 180deg at 50% 50%, rgba(59,130,246,.22), rgba(168,85,247,.18), rgba(34,197,94,.10), rgba(59,130,246,.22));
  filter: blur(26px);
  opacity:.55;
  animation: heroSpin 14s linear infinite;
  mix-blend-mode: screen;
}
@keyframes heroShift{
  0%{ background-position: 0% 50%; }
  50%{ background-position: 100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes heroSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}
body.theme-dark .hero.hero-animated:after{ opacity:.38; }


/* v30 responsive stabilization */
img, video, iframe { max-width: 100%; height: auto; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 991.98px){
  .navbar .form-control{min-width:0 !important;}
  .card-body{word-wrap:break-word;}
}
@media (max-width: 767.98px){
  .container, .container-fluid{padding-left:14px; padding-right:14px;}
  .btn, .form-control, .form-select{min-height:44px;}
  .table td, .table th{white-space:nowrap;}
  .offcanvas{max-width:88vw;}
}

/* v31 stronger responsive safeguards */
.row{--bs-gutter-x:1rem;}
.card, .hero, .modal-content{max-width:100%;}
.form-control, .form-select, .btn{max-width:100%;}
.checkout-card, .sticky-summary{max-width:100%;}
@media (max-width: 575.98px){
  h1,.h1{font-size:1.8rem;} h2,.h2{font-size:1.45rem;} h3,.h3{font-size:1.2rem;}
  .navbar-brand img{height:28px !important;}
  .table td, .table th{font-size:.92rem;}
  .btn{padding-inline:.85rem;}
}
@media (max-width: 767.98px){
  .d-flex.flex-wrap.justify-content-between.align-items-start.gap-3{align-items:stretch!important;}
  .hero{padding:16px; border-radius:16px;}
  .modal-dialog{margin:.6rem;}
}