/**
 * Premium design system — sync with Next.js 2026
 * @package Sandprof
 */

::selection {
  background: rgba(82, 160, 128, 0.25);
  color: var(--forest-900);
}

/* ——— Chrome ——— */
.sp-chrome { box-shadow: none; }
.sp-promo {
  background: var(--forest-900);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  position: relative;
  overflow: hidden;
}
.sp-promo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(61, 138, 110, 0.15), transparent);
  pointer-events: none;
}
.sp-promo a { color: var(--moss-400); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgba(61, 138, 110, 0.4); }
.sp-promo a:hover { color: #fff; }

.sp-header {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(224, 230, 227, 0.8);
}
.sp-header__inner { min-height: 4rem; padding: 0; }
.sp-menu { gap: 0.25rem; }
.sp-menu a {
  position: relative;
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  font-weight: 500;
  color: var(--muted-fg);
  transition: color 0.2s var(--ease-premium);
}
.sp-menu a:hover { color: var(--charcoal-900); }
.sp-menu .current-menu-item > a,
.sp-menu a.is-active {
  color: var(--forest-800);
}
.sp-menu .current-menu-item > a::after,
.sp-menu a.is-active::after {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  bottom: 0.15rem;
  height: 2px;
  border-radius: 999px;
  background: var(--moss-500);
}
.sp-nav-toggle {
  border-radius: 0.5rem;
  transition: background 0.2s;
}
.sp-nav-toggle:hover { background: rgba(27, 77, 62, 0.05); }
.sp-nav.is-open .sp-nav__panel {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}

/* ——— Buttons (Linear/Stripe style) ——— */
.sp-btn {
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.2s var(--ease-premium);
  active-scale: 0.98;
}
.sp-btn:active { transform: scale(0.98); }
.sp-btn--primary {
  background: var(--forest-800);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.sp-btn--primary:hover {
  background: var(--forest-700);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.sp-btn--secondary {
  border: 1px solid rgba(27, 77, 62, 0.2);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}
.sp-btn--secondary:hover {
  border-color: rgba(27, 77, 62, 0.4);
  background: #fff;
}
.sp-btn--ghost:hover { background: rgba(27, 77, 62, 0.05); }
.sp-btn--xl { padding: 1rem 2rem; border-radius: 1rem; font-size: 1rem; }
.sp-btn--inverse { border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.05); backdrop-filter: blur(8px); }

/* ——— Badge ——— */
.sp-badge {
  border: 1px solid rgba(61, 138, 110, 0.2);
  background: rgba(61, 138, 110, 0.1);
  border-radius: 999px;
}

/* ——— Section headers ——— */
.sp-section-eyebrow {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sp-tracking-eyebrow);
  color: var(--moss-500);
}
.sp-section-header { margin-bottom: var(--sp-section-header-gap); }
.sp-section-head .sp-section-header { margin-bottom: 0; flex: 1; }
.sp-section-header--center { text-align: center; }
.sp-section-header--center .sp-section-sub { margin-inline: auto; }
.sp-section-title {
  font-size: var(--sp-text-3xl);
  line-height: var(--sp-leading-tight);
  letter-spacing: var(--sp-tracking-display-lg);
  color: var(--sp-color-text);
}
.sp-section-sub { color: var(--muted-fg); line-height: 1.6; }

/* ——— Cards ——— */
.sp-surface-card,
.sp-card {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(224, 230, 227, 0.8);
  border-radius: 1rem;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}
.sp-surface-card--hover,
.sp-card--hover {
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s var(--ease-premium), border-color 0.3s;
}
.sp-surface-card--hover:hover,
.sp-card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
  border-color: rgba(61, 138, 110, 0.25);
}
.sp-spotlight {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}
.sp-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 50%), rgba(61, 138, 110, 0.1), transparent 70%);
  pointer-events: none;
  z-index: 1;
}
.sp-spotlight:hover::before { opacity: 1; }

/* ——— Hero ——— */
.sp-hero--full { padding: 2.25rem 0 6rem; }
.sp-hero__bg {
  background-image:
    linear-gradient(rgba(27, 77, 62, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(27, 77, 62, 0.03) 1px, transparent 1px),
    radial-gradient(ellipse 80% 60% at 50% -10%, rgba(61, 138, 110, 0.12), transparent);
  background-size: 48px 48px, 48px 48px, auto;
}
.sp-hero__blob {
  width: 24rem;
  height: 24rem;
  background: rgba(82, 160, 128, 0.15);
  animation: sp-float 7s ease-in-out infinite;
}
.sp-hero__title {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  line-height: 1.05;
  letter-spacing: var(--sp-tracking-display-xl);
  color: var(--charcoal-900);
}
.sp-hero__lead { color: var(--muted-fg); max-width: 36rem; }
.sp-hero__visual {
  border-radius: 1.5rem;
  box-shadow: var(--shadow-card);
  border: 1px solid rgba(15, 46, 38, 0.05);
}
.sp-hero__visual.sp-border-beam::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from 0deg, transparent, rgba(61, 138, 110, 0.4), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0.6;
  animation: sp-border-spin 4s linear infinite;
  pointer-events: none;
  z-index: 2;
}
@keyframes sp-border-spin { to { transform: rotate(360deg); } }
.sp-hero__stat {
  position: relative;
  overflow: hidden;
  transition: transform 0.3s var(--ease-premium), box-shadow 0.3s;
}
.sp-hero__stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow);
}
	.sp-hero__stat::after {
  content: attr(data-index);
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(61, 138, 110, 0.5);
}

/* ——— Trust / Clients ——— */
.sp-trustbar {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  border-color: rgba(224, 230, 227, 0.8);
}
.sp-trustbar__label {
  font-size: 0.625rem;
  line-height: 1;
  letter-spacing: 0.12em;
  color: var(--muted-fg);
}
.sp-trustbar__value {
  font-size: 0.875rem;
  line-height: 1.35;
}
.sp-icon-box {
  border: 1px solid rgba(61, 138, 110, 0.15);
  background: rgba(61, 138, 110, 0.08);
}
.sp-clients {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
}
.sp-clients__title { letter-spacing: var(--sp-tracking-eyebrow); font-size: 0.75rem; }

/* ——— Steps / Use cases ——— */
.sp-section--sand { background: rgba(243, 245, 244, 0.5); }
.sp-step-num { font-size: 2.75rem; color: rgba(61, 138, 110, 0.2); }
.sp-usecase-item {
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  transition: all 0.3s var(--ease-premium);
}
.sp-usecase-item:hover {
  border-color: rgba(61, 138, 110, 0.25);
  box-shadow: var(--shadow-card);
}

/* ——— Product cards ——— */
.sp-product-card {
  border-radius: 1rem;
  border-color: rgba(224, 230, 227, 0.8);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: var(--shadow-card);
  transition: all 0.3s var(--ease-premium);
}
.sp-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-glow);
}
.sp-product-card__media { height: 13rem; }
.sp-product-card:hover .sp-product-card__media img {
  transform: scale(1.04);
  transition-duration: 0.7s;
}
.sp-badge--stock { border-radius: var(--sp-btn-radius); }
.sp-filter-pill { border-radius: var(--radius); font-weight: 600; }
.sp-filter-pill.is-active { background: var(--forest-800); }

/* ——— Testimonials / FAQ ——— */
.sp-quote-icon { color: var(--moss-400); }
.sp-quote p { color: var(--muted-fg); }
.sp-faq__item {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(224, 230, 227, 0.8);
  border-radius: 1rem;
}
.sp-faq__q:hover { background: rgba(243, 245, 244, 0.5); }

/* ——— CTA ——— */
.sp-cta-banner {
  background: var(--forest-900);
  border-radius: 1.5rem;
  box-shadow: var(--shadow-glow);
  padding: 4rem 2rem;
}
.sp-cta-banner__pattern {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
}
.sp-cta-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(61, 138, 110, 0.2), transparent 70%);
  pointer-events: none;
}
.sp-cta-eyebrow {
  margin: 0 0 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--sp-tracking-eyebrow);
  color: var(--moss-400);
}
.sp-cta-banner h2 { font-size: clamp(1.875rem, 3vw, 2.75rem); letter-spacing: var(--sp-tracking-display-lg); }

/* ——— Footer ——— */
.sp-footer { border-color: rgba(224, 230, 227, 0.8); }
.sp-footer__title {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--muted-fg);
}
.sp-footer-links a { transition: color 0.2s; }
.sp-footer-links a:hover { color: var(--charcoal-900); }

/* ——— Floating CTA ——— */
.sp-floating-cta {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-color: rgba(224, 230, 227, 0.8);
}
.sp-floating-cta__btn { border-radius: var(--radius); }
.sp-floating-cta__btn--phone {
  border: 1px solid var(--border);
  background: #fff;
}

/* ——— Forms ——— */
.sp-input {
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 1px 2px rgba(15, 46, 38, 0.04);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.sp-input:focus {
  border-color: var(--moss-400);
  box-shadow: 0 0 0 3px rgba(82, 160, 128, 0.2);
  outline: none;
}
.sp-messenger { border-radius: var(--radius); background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(8px); }

/* ——— Magnetic CTA wrapper ——— */
[data-magnetic] { display: inline-flex; transition: transform 0.3s var(--ease-premium); }

/* ——— Page headers ——— */
.sp-page-title {
  font-size: clamp(1.875rem, 3vw, 2.75rem);
  letter-spacing: var(--sp-tracking-display-lg);
  color: var(--charcoal-900);
}
.sp-page-lead { color: var(--muted-fg); }

@media (prefers-reduced-motion: reduce) {
  .sp-hero__visual.sp-border-beam::before { animation: none; }
  [data-magnetic] { transition: none; }
}