@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
body { font-family: 'Inter', sans-serif; scroll-behavior: smooth; overflow-x: hidden; }
.glass { background: rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2); }

/* Mobile navigation fix - make nav solid on mobile */
@media (max-width: 1023px) {
    .glass {
        background: rgba(255, 255, 255, 0.95) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}
.gradient-text { background: linear-gradient(90deg, #3b82f6, #8b5cf6, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.hero-gradient { background: radial-gradient(circle at top right, rgba(59, 130, 246, 0.1), transparent), radial-gradient(circle at bottom left, rgba(139, 92, 246, 0.1), transparent); }
.nav-link { position: relative; transition: 0.3s; }
.nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background: #3b82f6; transition: 0.3s; }
.nav-link:hover::after { width: 100%; }
.card-hover:hover { transform: translateY(-10px) scale(1.02); }
.fa-x-twitter { color: white !important; font-size: 1.2rem; }
.bg-black { background-color: #000 !important; }

/* WordPress plugin cards */
.plugin-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.plugin-card::before {
  content: '';
  position: absolute;
  inset: -40% auto auto -25%;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--card-accent-soft, rgba(59, 130, 246, 0.25)) 0%, transparent 70%);
  z-index: -1;
  transition: transform 0.4s ease;
}

.plugin-card:hover {
  border-color: var(--card-accent-line, rgba(59, 130, 246, 0.35)) !important;
  box-shadow: 0 22px 44px rgba(15, 23, 42, 0.16);
}

.plugin-card:hover::before {
  transform: scale(1.2);
}

.plugin-icon {
  color: var(--card-accent, #2563eb);
  background: linear-gradient(140deg, var(--card-accent-soft, rgba(59, 130, 246, 0.25)), rgba(255, 255, 255, 0.85));
  box-shadow: inset 0 0 0 1px var(--card-accent-line, rgba(59, 130, 246, 0.3));
}

.card-link {
  color: var(--card-accent, #2563eb);
  width: fit-content;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  background: var(--card-accent-soft, rgba(59, 130, 246, 0.14));
  transition: transform 0.25s ease, filter 0.25s ease;
}

.card-link:hover {
  transform: translateX(4px);
  filter: brightness(0.95);
}

.plugin-grid > .plugin-card:nth-child(6n + 1) {
  --card-accent: #2563eb;
  --card-accent-soft: rgba(37, 99, 235, 0.23);
  --card-accent-line: rgba(37, 99, 235, 0.35);
}

.plugin-grid > .plugin-card:nth-child(6n + 2) {
  --card-accent: #0d9488;
  --card-accent-soft: rgba(13, 148, 136, 0.22);
  --card-accent-line: rgba(13, 148, 136, 0.34);
}

.plugin-grid > .plugin-card:nth-child(6n + 3) {
  --card-accent: #7c3aed;
  --card-accent-soft: rgba(124, 58, 237, 0.2);
  --card-accent-line: rgba(124, 58, 237, 0.32);
}

.plugin-grid > .plugin-card:nth-child(6n + 4) {
  --card-accent: #ea580c;
  --card-accent-soft: rgba(234, 88, 12, 0.22);
  --card-accent-line: rgba(234, 88, 12, 0.32);
}

.plugin-grid > .plugin-card:nth-child(6n + 5) {
  --card-accent: #059669;
  --card-accent-soft: rgba(5, 150, 105, 0.22);
  --card-accent-line: rgba(5, 150, 105, 0.32);
}

.plugin-grid > .plugin-card:nth-child(6n + 6) {
  --card-accent: #be185d;
  --card-accent-soft: rgba(190, 24, 93, 0.2);
  --card-accent-line: rgba(190, 24, 93, 0.32);
}

/* Homepage cards */
.home-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.09);
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.home-card::before {
  content: '';
  position: absolute;
  top: -70px;
  right: -60px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, var(--home-soft, rgba(37, 99, 235, 0.2)) 0%, transparent 70%);
  transition: transform 0.35s ease;
}

.home-card:hover {
  border-color: var(--home-line, rgba(37, 99, 235, 0.36)) !important;
  box-shadow: 0 24px 50px rgba(15, 23, 42, 0.16);
}

.home-card:hover::before {
  transform: scale(1.18);
}

.home-icon {
  color: var(--home-accent, #2563eb);
  text-shadow: 0 8px 18px var(--home-soft, rgba(37, 99, 235, 0.24));
}

.home-grid > .home-card:nth-child(6n + 1) {
  --home-accent: #2563eb;
  --home-soft: rgba(37, 99, 235, 0.22);
  --home-line: rgba(37, 99, 235, 0.35);
}

.home-grid > .home-card:nth-child(6n + 2) {
  --home-accent: #0f766e;
  --home-soft: rgba(15, 118, 110, 0.2);
  --home-line: rgba(15, 118, 110, 0.32);
}

.home-grid > .home-card:nth-child(6n + 3) {
  --home-accent: #ea580c;
  --home-soft: rgba(234, 88, 12, 0.2);
  --home-line: rgba(234, 88, 12, 0.32);
}

.home-grid > .home-card:nth-child(6n + 4) {
  --home-accent: #7c3aed;
  --home-soft: rgba(124, 58, 237, 0.2);
  --home-line: rgba(124, 58, 237, 0.32);
}

.home-grid > .home-card:nth-child(6n + 5) {
  --home-accent: #059669;
  --home-soft: rgba(5, 150, 105, 0.2);
  --home-line: rgba(5, 150, 105, 0.32);
}

.home-grid > .home-card:nth-child(6n + 6) {
  --home-accent: #0284c7;
  --home-soft: rgba(2, 132, 199, 0.2);
  --home-line: rgba(2, 132, 199, 0.32);
}