:root {
  /* Brand colors */
  --sd-orange: #F97316;
  --sd-orange-dark: #EA580C;
  --sd-orange-light: #FFEDD5;
  --sd-navy: #0F172A;
  --sd-navy-soft: #1E293B;
  --sd-white: #FFFFFF;
  --sd-bg: #F8FAFC;
  --sd-muted: #64748B;
  --sd-border: #E2E8F0;
  --sd-success: #16A34A;
  --sd-star: #FBBF24;

  /* Type */
  --sd-font-display: 'Poppins', 'Segoe UI', sans-serif;
  --sd-font-body: 'Inter', 'Segoe UI', sans-serif;

  /* Radii / shadows */
  --sd-radius: 16px;
  --sd-radius-sm: 10px;
  --sd-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.18);
  --sd-shadow-sm: 0 4px 14px -6px rgba(15, 23, 42, 0.12);
}

html { scroll-behavior: smooth; }
/* Styling for admin-authored rich text (Quill output) - Tailwind can't target these dynamically */
.rich-content p, .short-description p { margin: 0 0 6px 0; line-height: 1.6; }
.rich-content h2, .rich-content h3 { color: #0B2545; margin: 18px 0 8px; font-weight: 700; }
.rich-content h2 { font-size: 1.25rem; }
.rich-content h3 { font-size: 1.1rem; }
.rich-content ul, .rich-content ol { margin: 8px 0 14px 22px; }
.rich-content ul { list-style: disc; }
.rich-content ol { list-style: decimal; }
.rich-content li { margin-bottom: 4px; }
.rich-content strong, .rich-content b { color: #0B2545; }
.rich-content a { color: #FF6B1A; text-decoration: underline; }

/* Product image zoom / magnifier */
.zoom-wrap { position: relative; overflow: hidden; cursor: crosshair; }
.zoom-lens { display: none; position: absolute; width: 100px; height: 100px; border: 2px solid #FF6B1A; background: rgba(255,255,255,0.25); pointer-events: none; }
.zoom-result { display: none; position: absolute; top: 0; left: calc(100% + 16px); width: 380px; height: 380px; border: 1px solid #e2e5ea; border-radius: 10px; background-repeat: no-repeat; background-size: 400%; z-index: 20; background-color: white; }
@media (max-width: 900px) {
    .zoom-result { display: none !important; }
}

/* Password eye toggle */
.password-wrap { position: relative; }
.password-wrap input { padding-right: 40px; }
.toggle-eye { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); cursor: pointer; user-select: none; font-size: 16px; background: none; border: none; }
/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- App download ---------- */
.app-download { background: var(--sd-navy); border-radius: 28px; overflow: hidden; position: relative; }
.app-download::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(500px 260px at 90% 20%, rgba(249,115,22,0.25), transparent 70%);
}
.badge-soon {
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  color: #fff;
  padding: .5rem 1.1rem;
  font-size: .85rem;
  font-weight: 600;
  opacity: .85;
  cursor: not-allowed;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sd-font-display);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sd-orange);
}
.eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--sd-orange);
    display: inline-block;
}
/* ---------- Footer ---------- */
.sd-footer { background: var(--sd-navy); color: #CBD5E1; padding-top: 1rem; }
.sd-footer h6 { color: #fff; font-family: var(--sd-font-display); margin-bottom: 1.1rem; }
.sd-footer a { color: #94A3B8; }
.sd-footer a:hover { color: var(--sd-orange); }
.sd-footer .social-icon {
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center;
  transition: all .2s ease;
}
.sd-footer .social-icon:hover { background: var(--sd-orange); border-color: var(--sd-orange); color: #fff; }
.sd-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2.5rem; padding: 1.2rem 0; font-size: 0.85rem; color: #94A3B8; }