:root {
  --sf-navy: #0f1e3d;
  --sf-blue: #2563eb;
  --sf-blue-dark: #1d4ed8;
  --sf-ink: #1a1f2b;
  --sf-muted: #6b7280;
  --sf-bg: #f7f8fa;
  --sf-border: #e5e7eb;
  --sf-radius: 14px;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--sf-ink);
  background: #fff;
}

a { text-decoration: none; }

/* Top utility bar */
.sf-topbar {
  background: var(--sf-navy);
  color: #cbd5e1;
  font-size: .8125rem;
}
.sf-topbar a { color: #fff; }

/* Navbar */
.sf-navbar { border-bottom: 1px solid var(--sf-border); }
.sf-brand { font-weight: 800; font-size: 1.35rem; color: var(--sf-navy); display: flex; align-items: center; gap: .4rem; }
.sf-brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--sf-blue); display: inline-block; }
.sf-navbar .nav-link { color: var(--sf-ink); font-weight: 500; }
.sf-navbar .nav-link.active { color: var(--sf-blue); }
.btn-sf-primary { background: var(--sf-blue); border-color: var(--sf-blue); color: #fff; font-weight: 600; }
.btn-sf-primary:hover { background: var(--sf-blue-dark); border-color: var(--sf-blue-dark); color: #fff; }

/* Hero */
.sf-hero { background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%); }
.sf-hero h1 { font-weight: 800; line-height: 1.15; }
.sf-hero .highlight { color: var(--sf-blue); }
.sf-stat-icon { width: 36px; height: 36px; border-radius: 10px; background: #e8efff; color: var(--sf-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* Cards */
.sf-card { border: 1px solid var(--sf-border); border-radius: var(--sf-radius); transition: box-shadow .15s ease, transform .15s ease; background: #fff; }
.sf-card:hover { box-shadow: 0 10px 30px rgba(15,30,61,.08); transform: translateY(-2px); }
.sf-service-icon { width: 46px; height: 46px; border-radius: 12px; background: #e8efff; color: var(--sf-blue); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; }
.sf-price-badge { background: #eef2ff; color: var(--sf-blue-dark); font-weight: 700; border-radius: 999px; padding: .25rem .75rem; font-size: .8125rem; }

/* Section titles */
.sf-section-title { font-weight: 800; }
.sf-section-sub { color: var(--sf-muted); }

/* Product detail */
.sf-gallery-main img { border-radius: var(--sf-radius); width: 100%; object-fit: cover; aspect-ratio: 4/3; }
.sf-gallery-thumb img { border-radius: 10px; width: 100%; object-fit: cover; aspect-ratio: 4/3; cursor: pointer; border: 2px solid transparent; }
.sf-gallery-thumb.active img { border-color: var(--sf-blue); }
.sf-fact-box { background: var(--sf-bg); border-radius: var(--sf-radius); border: 1px solid var(--sf-border); }
.sf-fact-box dt { color: var(--sf-muted); font-weight: 500; }
.sf-fact-box dd { font-weight: 600; }
.sf-order-card { position: sticky; top: 90px; border: 1px solid var(--sf-border); border-radius: var(--sf-radius); box-shadow: 0 10px 30px rgba(15,30,61,.06); }

/* WhatsApp floating button */
.sf-wa-float {
  position: fixed; right: 18px; bottom: 18px; z-index: 1040;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 20px rgba(37,211,102,.4); font-size: 1.5rem;
}

/* Footer */
.sf-footer { background: var(--sf-navy); color: #cbd5e1; }
.sf-footer a { color: #e5e7eb; }
.sf-footer h6 { color: #fff; font-weight: 700; }

/* Breadcrumb */
.sf-breadcrumb { font-size: .875rem; }

/* Mobile responsive tweaks */
@media (max-width: 767.98px) {
  .sf-hero h1 { font-size: 1.75rem; }
  .sf-order-card { position: static; margin-top: 1.5rem; }
  .sf-topbar { display: none; }
}

@media (min-width: 768px) and (max-width: 1023.98px) {
  .sf-hero h1 { font-size: 2.1rem; }
}