/* SPB Service — marketing kit (Waxy-style dark premium) shared styles */

:root {
  --kit-bg:        #F7FAFD;   /* page base — near white, slight blue */
  --kit-panel:     #EBF1F9;   /* raised section, light blue tint */
  --kit-card:      #FFFFFF;   /* card surface */
  --kit-card-2:    #E1EAF6;   /* hover / inner */
  --kit-line:      rgba(7,42,89,0.10);
  --kit-line-2:    rgba(7,42,89,0.20);
  --kit-tx:        #072A59;   /* body on light — brand blue-900 */
  --kit-tx-2:      #45586E;   /* secondary on light */
  --kit-tx-3:      #7E8CA0;   /* muted on light */
  --kit-accent:    #F68F1C;   /* orange */
  --kit-accent-2:  #FAA23F;
  --kit-blue:      #0C4DA2;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--kit-bg); color: var(--kit-tx); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; }
a { -webkit-tap-highlight-color: transparent; }

.kit-wrap { max-width: 1240px; margin: 0 auto; padding-left: 28px; padding-right: 28px; }

/* eyebrow with leading dash — Waxy signature */
.kit-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--kit-accent);
}
.kit-eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--kit-accent); display: inline-block; }

.kit-h2 {
  font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.08;
  letter-spacing: -.02em; text-transform: uppercase; color: var(--kit-tx); margin: 14px 0 0;
}
.kit-h2.dark { color: var(--ink-900); }

/* buttons */
.kit-btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: .02em;
  border: none; border-radius: 999px; padding: 15px 30px; transition: transform var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast);
}
.kit-btn:active { transform: scale(.97); }
.kit-btn--accent { background: var(--kit-accent); color: #111827; box-shadow: 0 10px 26px rgba(242,142,30,.34); }
.kit-btn--accent:hover { background: var(--kit-accent-2); }
.kit-btn--ghost { background: transparent; color: var(--kit-tx); border: 1.5px solid var(--kit-line-2); }
.kit-btn--ghost:hover { border-color: var(--kit-accent); color: var(--kit-accent); }

/* WhatsApp button — green hover + lift, with a gently pulsing icon */
.kit-btn--wa { transition: transform var(--dur-fast), background var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast); }
.kit-btn--wa:hover {
  background: #25D366 !important; border-color: #25D366 !important; color: #fff !important;
  transform: translateY(-3px); box-shadow: 0 14px 30px rgba(37,211,102,.42);
}
.kit-btn--wa:active { transform: translateY(-1px) scale(.98); }
.kit-btn--wa svg { animation: waPulse 1.8s var(--ease-in-out) infinite; transform-origin: center; }
@keyframes waPulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.22); } 70% { transform: scale(1); } }

.kit-section { padding: 100px 0; }

/* reveal */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
}

/* corner stripe motif from the logo */
.kit-stripes {
  background-image: repeating-linear-gradient(115deg, currentColor 0 10px, transparent 10px 38px);
}