/* Craft Web Hub — Global Styles */
:root {
  --brand-primary: #6366F1;
  --brand-accent: #F59E0B;
  --brand-dark: #0F172A;
}

html { scroll-behavior: smooth; }

body { -webkit-font-smoothing: antialiased; }

/* Card hover lift */
.card-lift {
  transition: transform .25s ease, box-shadow .25s ease;
}
.card-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(15,23,42,.18);
}

/* Hero gradient mesh */
.hero-mesh {
  background:
    radial-gradient(60% 50% at 20% 20%, rgba(99,102,241,.18), transparent 70%),
    radial-gradient(50% 40% at 80% 10%, rgba(245,158,11,.15), transparent 70%),
    radial-gradient(70% 60% at 60% 90%, rgba(99,102,241,.10), transparent 70%),
    #0F172A;
}

/* Glow button */
.btn-glow {
  box-shadow: 0 8px 24px -8px rgba(99,102,241,.55);
  transition: all .2s ease;
}
.btn-glow:hover {
  box-shadow: 0 12px 32px -8px rgba(99,102,241,.7);
  transform: translateY(-1px);
}

/* Pricing card highlight */
.plan-highlight {
  position: relative;
}
.plan-highlight::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  background: linear-gradient(135deg, #6366F1, #F59E0B);
  z-index: -1;
  opacity: .8;
}

/* Marquee */
.marquee {
  display: flex;
  gap: 3rem;
  animation: marquee 30s linear infinite;
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Line clamp */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Portal card icon */
.portal-icon {
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(245,158,11,.08));
  font-feature-settings: "liga";
}

/* Smooth fade-in */
.fade-in {
  animation: fadeIn .6s ease both;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Star rating */
.stars { color: #F59E0B; letter-spacing: 1px; }

/* Code block */
pre.code {
  background: #0F172A;
  color: #E2E8F0;
  border-radius: 12px;
  padding: 16px 20px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  overflow-x: auto;
  line-height: 1.7;
}
pre.code .k { color: #C084FC; }
pre.code .s { color: #FCD34D; }
pre.code .c { color: #64748B; }