/* ============================================================
   PEARLCODE – Modern Design System
   Palette: Indigo · Violet · Sky · Slate
   ============================================================ */

:root {
  --pc-primary:        #4338ca;          /* indigo-700   */
  --pc-primary-dark:   #312e81;          /* indigo-900   */
  --pc-primary-light:  #818cf8;          /* indigo-400   */
  --pc-accent:         #0ea5e9;          /* sky-500      */
  --pc-accent-light:   #7dd3fc;          /* sky-300      */
  --pc-violet:         #8b5cf6;          /* violet-500   */
  --pc-emerald:        #10b981;          /* emerald-500  */
  --pc-rose:           #ec4899;          /* pink-500     */
  --pc-amber:          #f59e0b;          /* amber-500    */
  --pc-cyan:           #06b6d4;          /* cyan-500     */
  --pc-dark:           #0f172a;          /* slate-950    */
  --pc-muted:          #64748b;          /* slate-500    */
  --pc-soft:           #f8fafc;          /* slate-50     */
  --pc-border:         rgba(15,23,42,.08);
  --pc-border-primary: rgba(67,56,202,.20);

  /* Gradients */
  --pc-grad-hero:      linear-gradient(135deg, #4338ca 0%, #8b5cf6 45%, #0ea5e9 75%, #06b6d4 100%);
  --pc-grad-cta:       linear-gradient(135deg, #312e81 0%, #4338ca 35%, #8b5cf6 70%, #ec4899 100%);
  --pc-grad-soft:      linear-gradient(135deg, rgba(67,56,202,.07) 0%, rgba(139,92,246,.07) 45%, rgba(14,165,233,.07) 75%, rgba(236,72,153,.06) 100%);
  --pc-grad-warm:      linear-gradient(135deg, var(--pc-rose) 0%, var(--pc-amber) 100%);

  /* Shadows */
  --pc-shadow-card:    0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(67,56,202,.10);
  --pc-shadow-hover:   0 8px 32px rgba(67,56,202,.22), 0 2px 8px rgba(0,0,0,.08);
  --pc-shadow-btn:     0 4px 14px rgba(67,56,202,.38);
}

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", "Apple Color Emoji",
               "Noto Color Emoji", sans-serif;
  color: var(--pc-dark);
  background: #ffffff;
  -webkit-font-smoothing: antialiased;
}

a { text-underline-offset: 3px; }

/* ── Gradient text utility ──────────────────────────────── */
.pc-grad-text {
  background: var(--pc-grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Navbar ───────────────────────────────────────────────── */
.site-header {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  background: rgba(255,255,255,.92) !important;
  border-bottom: 1px solid var(--pc-border) !important;
}

.site-header .navbar {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.site-header .navbar-brand span {
  background: var(--pc-grad-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 700;
  font-size: 1.3rem;
}

.site-header .nav-link {
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--pc-dark);
  border-radius: .5rem;
  transition: background .15s, color .15s;
}
.site-header .nav-link:hover,
.site-header .nav-link:focus {
  color: var(--pc-primary);
  background: rgba(67,56,202,.08);
}

/* Primary button – gradient */
.btn-primary {
  background: var(--pc-grad-cta);
  border: none;
  box-shadow: var(--pc-shadow-btn);
  transition: filter .2s, transform .15s, box-shadow .2s;
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--pc-grad-cta);
  filter: brightness(1.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(67,56,202,.45);
  border: none;
}
.btn-primary:active { transform: translateY(0); filter: brightness(.98); }

.btn-outline-primary {
  border-color: var(--pc-primary);
  color: var(--pc-primary);
}
.btn-outline-primary:hover {
  background: var(--pc-primary);
  border-color: var(--pc-primary);
  box-shadow: var(--pc-shadow-btn);
}

/* ── Hero ─────────────────────────────────────────────────── */
.pc-hero {
  position: relative;
  background:
    radial-gradient(ellipse 900px 500px at 5% -5%,  rgba(67,56,202,.16),  transparent 60%),
    radial-gradient(ellipse 700px 400px at 95% 10%,  rgba(14,165,233,.15), transparent 55%),
    radial-gradient(ellipse 550px 320px at 80% 90%,  rgba(236,72,153,.10), transparent 60%),
    radial-gradient(ellipse 500px 300px at 50% 100%, rgba(139,92,246,.11), transparent 65%),
    #ffffff;
  background-size: 160% 160%;
  background-position: 0% 0%;
}

@media (prefers-reduced-motion: no-preference) {
  .pc-hero {
    animation: heroDrift 22s ease-in-out infinite alternate;
  }
}
@keyframes heroDrift {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 50% 100%; }
  50%  { background-position: 10% 10%, 90% 15%, 85% 85%, 55% 90%; }
  100% { background-position: 0% 0%, 100% 0%, 100% 100%, 50% 100%; }
}

.pc-dot {
  width: 10px; height: 10px; border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, #ffffff 0%, #a5b4fc 35%, #4338ca 75%, #0f172a 100%);
  box-shadow: 0 0 0 3px rgba(67,56,202,.15);
  animation: dotPulse 2.5s ease-in-out infinite;
}
@keyframes dotPulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(67,56,202,.15); }
  50%       { box-shadow: 0 0 0 6px rgba(67,56,202,.08); }
}

/* ── Pills / Badges ──────────────────────────────────────── */
.pc-pill {
  font-size: .82rem;
  padding: .3rem .65rem;
  border-radius: 999px;
  background: rgba(67,56,202,.08);
  border: 1px solid rgba(67,56,202,.18);
  color: var(--pc-primary);
  font-weight: 500;
  transition: background .15s, border-color .15s;
}
.pc-pill:hover {
  background: rgba(67,56,202,.14);
  border-color: rgba(67,56,202,.30);
}

/* Rainbow cycling across repeated pill lists */
.pc-pill:nth-of-type(4n+2) { color: var(--pc-violet); background: rgba(139,92,246,.09); border-color: rgba(139,92,246,.20); }
.pc-pill:nth-of-type(4n+2):hover { background: rgba(139,92,246,.16); border-color: rgba(139,92,246,.32); }
.pc-pill:nth-of-type(4n+3) { color: #0284c7; background: rgba(14,165,233,.09); border-color: rgba(14,165,233,.20); }
.pc-pill:nth-of-type(4n+3):hover { background: rgba(14,165,233,.16); border-color: rgba(14,165,233,.32); }
.pc-pill:nth-of-type(4n+4) { color: #be185d; background: rgba(236,72,153,.09); border-color: rgba(236,72,153,.20); }
.pc-pill:nth-of-type(4n+4):hover { background: rgba(236,72,153,.16); border-color: rgba(236,72,153,.32); }

/* ── Cards ───────────────────────────────────────────────── */
.pc-card {
  border-radius: 1.25rem;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: var(--pc-shadow-card);
}
.pc-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pc-shadow-hover) !important;
}

.pc-mini-title {
  font-size: .7rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--pc-primary);
  font-weight: 600;
  margin-bottom: .35rem;
}

/* ── Badge icon ──────────────────────────────────────────── */
.pc-badge-icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(67,56,202,.12), rgba(139,92,246,.12));
  border: 1px solid rgba(67,56,202,.18);
  color: var(--pc-primary);
  flex-shrink: 0;
}

/* ── Glass card ──────────────────────────────────────────── */
.pc-glass {
  border-radius: 1.5rem;
  background: linear-gradient(135deg,
    rgba(67,56,202,.07) 0%,
    rgba(139,92,246,.06) 50%,
    rgba(14,165,233,.07) 100%);
  border: 1px solid rgba(67,56,202,.14) !important;
  backdrop-filter: blur(8px);
}

/* ── Stat tiles ──────────────────────────────────────────── */
.pc-stat {
  border-radius: 1.1rem;
  background: rgba(255,255,255,.85);
  border: 1px solid var(--pc-border);
  padding: 14px;
  transition: box-shadow .2s;
}
.pc-stat:hover { box-shadow: var(--pc-shadow-card); }

.pc-stat-icon {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(67,56,202,.12), rgba(14,165,233,.12));
  color: var(--pc-primary);
}
.pc-stat-title { font-size: .78rem; color: var(--pc-muted); margin-top: 8px; }
.pc-stat-value { font-weight: 800; margin-top: 2px; color: var(--pc-dark); }

/* ── Icon color variants (use to rotate hue across a grid of 4) ──── */
.pc-icon-c2 { background: linear-gradient(135deg, rgba(139,92,246,.14), rgba(236,72,153,.14)) !important; color: var(--pc-violet) !important; }
.pc-icon-c3 { background: linear-gradient(135deg, rgba(16,185,129,.14), rgba(14,165,233,.14)) !important; color: #059669 !important; }
.pc-icon-c4 { background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(236,72,153,.14)) !important; color: #b45309 !important; }

/* ── Panels ──────────────────────────────────────────────── */
.pc-panel {
  border-radius: 1.5rem;
  border: 1px solid var(--pc-border) !important;
}

/* ── Divider ─────────────────────────────────────────────── */
.pc-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(67,56,202,.15), transparent);
}

/* ── Feature boxes ───────────────────────────────────────── */
.pc-feature {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 1.1rem;
  background: #fff;
  border: 1px solid var(--pc-border);
  box-shadow: 0 2px 12px rgba(15,23,42,.05);
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.pc-feature:hover {
  border-color: var(--pc-border-primary);
  box-shadow: 0 4px 20px rgba(67,56,202,.12);
  transform: translateY(-2px);
}

.pc-feature-icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(67,56,202,.12), rgba(139,92,246,.12));
  color: var(--pc-primary);
  flex-shrink: 0;
}

/* ── Steps ───────────────────────────────────────────────── */
.pc-steps { display: grid; gap: 10px; }
.pc-step {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 1.1rem;
  background: rgba(67,56,202,.04);
  border: 1px solid rgba(67,56,202,.10);
  transition: background .2s, border-color .2s;
}
.pc-step:hover {
  background: rgba(67,56,202,.07);
  border-color: rgba(67,56,202,.20);
}
.pc-step-num {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--pc-grad-hero);
  color: #fff;
  font-weight: 800;
  font-size: .85rem;
  flex-shrink: 0;
}
.pc-step-num.pc-icon-c2 { background: linear-gradient(135deg, var(--pc-violet), var(--pc-rose)) !important; color: #fff !important; }
.pc-step-num.pc-icon-c3 { background: linear-gradient(135deg, var(--pc-emerald), var(--pc-accent)) !important; color: #fff !important; }
.pc-step-num.pc-icon-c4 { background: linear-gradient(135deg, var(--pc-amber), var(--pc-rose)) !important; color: #fff !important; }

/* ── CTA sections ────────────────────────────────────────── */
.pc-cta {
  border-radius: 1.75rem;
  background: var(--pc-grad-cta);
  position: relative;
  overflow: hidden;
}
.pc-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 600px 300px at 10% 0%,  rgba(255,255,255,.10), transparent 60%),
    radial-gradient(ellipse 400px 200px at 90% 100%, rgba(14,165,233,.20), transparent 55%);
  pointer-events: none;
}
.pc-cta > * { position: relative; }

.pc-cta-soft {
  border-radius: 1.75rem;
  background: var(--pc-grad-soft);
  border: 1px solid rgba(67,56,202,.12);
}

/* ── Icon soft ───────────────────────────────────────────── */
.pc-icon-soft {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(67,56,202,.12), rgba(14,165,233,.12));
  color: var(--pc-primary);
}

/* ── Floating badge ──────────────────────────────────────── */
.pc-float-badge {
  position: absolute;
  right: 10%; bottom: 10%;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid var(--pc-border);
  color: var(--pc-dark);
  align-items: center;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(67,56,202,.12);
  font-size: .875rem;
  font-weight: 500;
}

/* ── Honeypot (spam trap, hidden from real users) ────────── */
.pc-hp {
  position: absolute;
  left: -9999px;
  top: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* ── Content pages ───────────────────────────────────────── */
.pc-content h2 { margin-top: 1.5rem; font-weight: 800; }
.pc-content p, .pc-content li { color: #374151; }

/* ── Info cards (About page) ─────────────────────────────── */
.pc-info-card {
  border-radius: 1.1rem;
  transition: box-shadow .2s, transform .2s;
}
.pc-info-card:hover {
  box-shadow: var(--pc-shadow-hover) !important;
  transform: translateY(-2px);
}

/* ── Testimonials ────────────────────────────────────────── */
.testimonial-card {
  border-radius: 1.25rem;
  transition: transform .2s, box-shadow .2s;
}
.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--pc-shadow-hover) !important;
}

/* ── Section backgrounds ─────────────────────────────────── */
.bg-soft-gradient {
  background: linear-gradient(180deg, var(--pc-soft) 0%, #ffffff 100%);
}

/* Override Bootstrap bg-light with our palette */
.bg-light {
  background-color: var(--pc-soft) !important;
}

/* ── Blog cards / Product cards ──────────────────────────── */
.card { border-radius: 1.25rem; }

/* ── Alert / Toast ───────────────────────────────────────── */
.alert-success {
  background: linear-gradient(135deg, rgba(16,185,129,.08), rgba(14,165,233,.08));
  border-color: rgba(16,185,129,.25);
  color: #065f46;
}

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  border-top: 1px solid var(--pc-border) !important;
}
.site-footer a:hover { text-decoration: underline !important; color: var(--pc-primary) !important; }
.site-footer .fw-semibold { color: var(--pc-dark); }

/* Footer badge accents */
.site-footer .badge.text-bg-light {
  background: rgba(67,56,202,.07) !important;
  border-color: rgba(67,56,202,.18) !important;
  color: var(--pc-primary) !important;
}

/* ── Navbar mobile ───────────────────────────────────────── */
.navbar-collapse { transition: height .25s ease; }
.navbar .nav-link { font-weight: 500; }
.navbar .nav-link:hover, .navbar .nav-link:focus {
  background-color: rgba(67,56,202,.08);
  color: var(--pc-primary);
}

/* ── Scroll reveal animation ─────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .pc-fade-in {
    opacity: 0;
    transform: translateY(18px);
    animation: fadeInUp .5s ease forwards;
  }
  @keyframes fadeInUp {
    to { opacity: 1; transform: translateY(0); }
  }
  .pc-fade-in:nth-child(2) { animation-delay: .1s; }
  .pc-fade-in:nth-child(3) { animation-delay: .2s; }
  .pc-fade-in:nth-child(4) { animation-delay: .3s; }
}

/* ── Fluid typography ────────────────────────────────────── */
/* Scales smoothly with viewport width instead of jumping at breakpoints */
h1, .display-4, .display-5 { font-size: clamp(1.85rem, 1.15rem + 3vw, 3rem); }
.display-6 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.5rem); }
h2, .h3 { font-size: clamp(1.3rem, 1.05rem + 1vw, 1.75rem); }
.lead { font-size: clamp(1rem, 0.92rem + 0.4vw, 1.2rem); }

/* ── Responsive tweaks ───────────────────────────────────── */
@media (max-width: 767.98px) {
  .pc-cta { border-radius: 1.25rem; }
  .pc-glass { border-radius: 1.25rem; }
  .pc-hero { background-size: 220% 220%; }
}

/* Tap-friendly CTA rows: any flex/gap row holding a large button stacks full-width on phones */
@media (max-width: 575.98px) {
  .site-header .navbar-brand span { font-size: clamp(1.05rem, .9rem + 1vw, 1.3rem); }
  .pc-hero { padding-top: .5rem; padding-bottom: .5rem; }
  .pc-glass .card-body { padding: 1.25rem !important; }
  .pc-float-badge { display: none !important; }
  .pc-cta, .pc-cta-soft, .pc-panel { border-radius: 1.1rem; }
  .pc-step { padding: 12px 14px; }

  .d-flex.flex-wrap.gap-2:has(.btn-lg) > .btn,
  .d-flex.flex-wrap.gap-2:has(.btn-lg) > a.btn {
    flex: 1 1 100%;
  }
}

/* Minimum comfortable tap targets on touch devices */
@media (max-width: 991.98px) {
  .navbar .nav-link { min-height: 44px; display: flex; align-items: center; }
  .btn { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
}