*{ scroll-behavior:smooth; }
html,body{ background:#f8fafc; }

/* Cards */
.card{
  background:#ffffff;
  border:1px solid #e2e8f0;
  box-shadow: 0 1px 3px rgba(15,23,42,0.05);
}
.card-hover{ transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card-hover:hover{
  transform: translateY(-2px);
  border-color:#93c5fd;
  box-shadow: 0 12px 32px -12px rgba(37,99,235,0.25);
}

/* Buttons */
.btn-primary{
  background:#2563eb;
  color:#ffffff;
  transition: all .2s ease;
  box-shadow: 0 1px 2px rgba(15,23,42,0.1);
}
.btn-primary:hover{
  background:#1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -6px rgba(37,99,235,0.5);
}
.btn-secondary{
  background:#ffffff;
  border:1px solid #cbd5e1;
  color:#334155;
  transition: all .2s ease;
}
.btn-secondary:hover{
  border-color:#2563eb;
  color:#1d4ed8;
  background:#eff6ff;
}

/* Hero background */
.hero-bg{
  background:
    radial-gradient(ellipse 80% 60% at 70% 0%, rgba(37,99,235,0.08), transparent 60%),
    radial-gradient(ellipse 60% 50% at 20% 100%, rgba(13,148,136,0.06), transparent 60%),
    #f8fafc;
}

/* Section eyebrow label */
.eyebrow{
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#2563eb;
  margin-bottom:.75rem;
}

/* Checkmark bullet */
.check{
  display:grid;
  place-items:center;
  width:20px;
  height:20px;
  border-radius:9999px;
  background:#dcfce7;
  color:#16a34a;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
  margin-top:2px;
}

/* Reveal on scroll */
.reveal{ opacity:0; transform: translateY(20px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }

/* Service card hover */
.svc-card{ transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.svc-card:hover{
  transform: translateY(-3px);
  border-color:#93c5fd;
  box-shadow: 0 16px 40px -16px rgba(37,99,235,0.3);
  cursor:pointer;
}

/* Scrollbar */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:#f1f5f9; }
::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:10px; border:2px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover{ background:#94a3b8; }

/* Category tab chip */
.tab-chip{
  padding:.5rem .9rem;
  border-radius:10px;
  border:1px solid #e2e8f0;
  background:#ffffff;
  font-size:13px;
  font-weight:500;
  color:#475569;
  cursor:pointer;
  transition: all .2s;
}
.tab-chip:hover{ border-color:#93c5fd; color:#1d4ed8; }
.tab-chip.active{
  background:#2563eb;
  border-color:#2563eb;
  color:#ffffff;
  box-shadow:0 4px 12px -4px rgba(37,99,235,0.5);
}

/* QR code (visual) */
.qr{
  display:grid;
  grid-template-columns: repeat(21, 10px);
  grid-auto-rows:10px;
  gap:0;
  padding:10px;
  background:#ffffff;
  border:1px solid #e2e8f0;
  border-radius:10px;
}
.qr div{ width:10px; height:10px; }
.qr .on{ background:#0f172a; }

/* FAQ item */
details.faq-item summary{ list-style:none; cursor:pointer; }
details.faq-item summary::-webkit-details-marker{ display:none; }
details.faq-item[open] .chev{ transform: rotate(45deg); }
.chev{ transition: transform .2s; }

/* Admin nav item */
.nav-item{
  display:flex;
  align-items:center;
  gap:.5rem;
  width:100%;
  text-align:left;
  padding:.6rem .75rem;
  border-radius:10px;
  font-size:14px;
  font-weight:500;
  color:#475569;
  cursor:pointer;
  transition: all .15s;
}
.nav-item:hover{ background:#f1f5f9; color:#1d4ed8; }
.nav-item.active{ background:#eff6ff; color:#1d4ed8; font-weight:600; }