:root{
  --bg:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --accent:#0ea5e9;
  --accent-600:#0284c7;
  --accent-100:#e0f2fe;
  --surface:#ffffff;
  --border:#e5e7eb;
  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 8px 24px rgba(0,0,0,.08);
  --radius-md:12px;
}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);}
.text-secondary{color:var(--accent);} .text-muted{color:var(--muted);}
.btn-accent{background:var(--accent);color:#ffffff;border:none;} .btn-accent:hover{background:var(--accent-600);color:#ffffff;}
.fixed-back{position:fixed;top:12px;left:12px;z-index:1030}
.fixed-back a{background:#fff;color:#111;padding:6px 10px;border-radius:8px;text-decoration:none;box-shadow:0 2px 6px rgba(0,0,0,.12)}
section{scroll-margin-top:80px}
.hero-img{max-height:380px;object-fit:cover;border-radius:var(--radius-md);box-shadow:var(--shadow-md)}
/* About section image/SVG holder: remove border/shadow */
#about .hero-img{ box-shadow:none !important; border:none !important; border-radius:0 !important; }
.card{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm);transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease, border-color .15s ease;border-radius:var(--radius-md)}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:var(--accent-100);border-color:var(--accent)}
.card-equal{ display:flex; flex-direction:column; }
.card-equal .card-body{ flex:1 1 auto; display:flex; flex-direction:column; gap:.4rem }
.card-equal .card-footer{ background:transparent; border-top:1px solid var(--border); }
.card-img-fixed{ width: 100%; height: 200px; object-fit: cover; border-top-left-radius: var(--radius-md); border-top-right-radius: var(--radius-md); }
@media (min-width: 992px){ .card-img-fixed{ height: 220px; } }

/* Glass buttons with parallax */
.btn-glass{
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.5);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  backdrop-filter: saturate(140%) blur(8px);
  color: var(--text);
  transition: transform .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
  transform: translate(calc(var(--blob-tx, 0px) * .15), calc(var(--blob-ty, 0px) * .15));
  box-shadow: var(--shadow-sm);
}
.btn-glass:hover{ background: var(--accent-100); border-color: var(--accent); box-shadow: var(--shadow-md); }
.btn-glass:active{ transform: translate(calc(var(--blob-tx, 0px) * .12), calc(var(--blob-ty, 0px) * .12)) scale(.98); }
.btn-glass.btn-accent{ background: var(--accent); color:#fff; border-color: rgba(255,255,255,.5); }
.btn-glass.btn-accent:hover{ background: var(--accent-600); color:#fff; border-color: rgba(255,255,255,.6); }

/* Products CTA: glassy, fixed (no parallax) */
#products .btn-glass{
  transform: none !important;
  background: rgba(255,255,255,0.5) !important;
  color: #334155 !important; /* slate-700 for readability */
  border: 1px solid rgba(51,65,85,0.35);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
}
#products .btn-glass:active{ transform: none !important; }
#products .btn-glass:hover{
  background: rgba(255,255,255,0.62) !important;
  color: #334155 !important;
  border-color: rgba(51,65,85,0.5);
}
.icon-circle{width:40px;height:40px;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;background:#e0f2fe;color:#0284c7;margin-right:.5rem}
.hero-badges span{display:inline-block;background:#f1f5f9;color:#334155;border-radius:9999px;padding:.35rem .7rem;margin:.2rem .3rem 0 0;font-size:.85rem}
.card-title{color:#0f172a}
a.nav-link{color:#334155} a.nav-link:hover{color:var(--accent)}
.navbar{background:var(--surface);border-bottom:1px solid #eef2f7}
.footer{border-top:1px solid var(--border);background:var(--surface)}
.text-justify{ text-align: justify; }
a:focus-visible, button:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; border-radius:6px }
@media (prefers-reduced-motion: reduce){
  *{ transition:none !important; animation:none !important }
}
/* Section separation helpers */
section.section-alt{ background:#e2e8f0; }
section.section-accent{ background:#bae6fd; }

/* Glassmorphism */
.glass{
  background: rgba(255,255,255,0.6) !important;
  border: 1px solid rgba(255,255,255,0.5) !important;
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.card.glass:hover{
  background: rgba(255,255,255,0.72) !important;
  border-color: var(--accent) !important;
}
@supports not ((-webkit-backdrop-filter: none) or (backdrop-filter: none)){
  .glass{ background:#ffffff !important; }
}

/* Decorative vector backgrounds */
.bg-vectors{
  position: relative;
  overflow: hidden;
}
.bg-vectors::before,
.bg-vectors::after{
  content:"";
  position:absolute;
  width: 600px; height: 600px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: .50;
  z-index: 0;
}
.bg-vectors::before{
  background: radial-gradient(closest-side, rgba(14,165,233,.50), rgba(2,132,199,.0));
  top:-200px; left:-150px;
}
.bg-vectors::after{
  background: radial-gradient(closest-side, rgba(2,132,199,.50), rgba(14,165,233,.0));
  bottom:-220px; right:-120px;
}
.bg-vectors .container, .bg-vectors .card{ position: relative; z-index: 1; }

/* Accent variant for darker section-alt backgrounds */
.bg-vectors-accent{
  position: relative;
  overflow: hidden;
}
.bg-vectors-accent::before,
.bg-vectors-accent::after{
  content:"";
  position:absolute;
  width: 620px; height: 620px;
  border-radius: 50%;
  filter: blur(50px);
  opacity: .60;
  z-index: 0;
}
.bg-vectors-accent::before{
  background: radial-gradient(closest-side, rgba(2,132,199,.55), rgba(14,165,233,.0));
  top:-180px; left:-140px;
}
.bg-vectors-accent::after{
  background: radial-gradient(closest-side, rgba(14,165,233,.55), rgba(2,132,199,.0));
  bottom:-200px; right:-100px;
}
.bg-vectors-accent .container, .bg-vectors-accent .card{ position: relative; z-index: 1; }

/* Subtle motion for depth (variable-driven to combine with mouse parallax) */
@property --blob-ax { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --blob-ay { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --blob-bx { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --blob-by { syntax: '<length>'; inherits: false; initial-value: 0px; }
/* mouse offset */
:root{ --blob-tx: 0px; --blob-ty: 0px; }

@keyframes blobFloatA {
  0% { --blob-ax: 0px; --blob-ay: 0px; }
  50% { --blob-ax: 22px; --blob-ay: -22px; }
  100% { --blob-ax: 0px; --blob-ay: 0px; }
}
@keyframes blobFloatB {
  0% { --blob-bx: 0px; --blob-by: 0px; }
  50% { --blob-bx: -18px; --blob-by: 18px; }
  100% { --blob-bx: 0px; --blob-by: 0px; }
}
.bg-vectors::before {
  animation: blobFloatA 18s ease-in-out infinite alternate;
  transform: translate(calc(var(--blob-tx, 0px) + var(--blob-ax, 0px)), calc(var(--blob-ty, 0px) + var(--blob-ay, 0px))) scale(1.03);
}
.bg-vectors::after {
  animation: blobFloatB 22s ease-in-out infinite alternate;
  transform: translate(calc(var(--blob-tx, 0px) + var(--blob-bx, 0px)), calc(var(--blob-ty, 0px) + var(--blob-by, 0px))) scale(1.03);
}
.bg-vectors-accent::before {
  animation: blobFloatA 19s ease-in-out infinite alternate;
  transform: translate(calc(var(--blob-tx, 0px) + var(--blob-ax, 0px)), calc(var(--blob-ty, 0px) + var(--blob-ay, 0px))) scale(1.03);
}
.bg-vectors-accent::after {
  animation: blobFloatB 24s ease-in-out infinite alternate;
  transform: translate(calc(var(--blob-tx, 0px) + var(--blob-bx, 0px)), calc(var(--blob-ty, 0px) + var(--blob-by, 0px))) scale(1.03);
}

@media (prefers-reduced-motion: reduce){
  .bg-vectors::before, .bg-vectors::after,
  .bg-vectors-accent::before, .bg-vectors-accent::after { animation: none !important; }
}