:root{
  --deep:#0c1133;
  --deep2:#0d1747;
  --teal:#24ffd3;
  --purple:#a741f5;
  --gold:#f3c969;
  --ink:rgba(255,255,255,0.88);
  --ink-d:rgba(255,255,255,0.66);
}

/* Background + base */
body{
  background:
    radial-gradient(1000px 1000px at 80% -10%, rgba(167,65,245,0.18), transparent 60%),
    radial-gradient(900px 900px at -10% 20%, rgba(36,255,211,0.12), transparent 55%),
    linear-gradient(145deg, var(--deep), var(--deep2));
  color:var(--ink);
  font-family:'Quicksand',system-ui,Segoe UI,Roboto,sans-serif;
  margin:0;
  min-height:100dvh;
  display:flex; flex-direction:column;
}

/* Subtle animated particles */
.stars{ position:fixed; inset:0; pointer-events:none; z-index:-1; opacity:.5;
  background-image: radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,0.4), transparent 60%),
                   radial-gradient(1.5px 1.5px at 70% 60%, rgba(255,255,255,0.35), transparent 60%),
                   radial-gradient(1.2px 1.2px at 40% 80%, rgba(255,255,255,0.25), transparent 60%);
  animation: stars-drift 40s linear infinite;
}
@keyframes stars-drift{ to{ transform: translate3d(-40px,-20px,0);} }

/* Header */
.spells-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 22px; position:sticky; top:0; z-index:50;
  background: linear-gradient(180deg, rgba(12,17,51,0.85), rgba(12,17,51,0.45), rgba(12,17,51,0));
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.07);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand img{ width:36px; height:36px; filter: drop-shadow(0 0 12px rgba(167,65,245,0.7)); }
.brand .t{ font-family:'Montserrat'; font-weight:800; letter-spacing:.5px; font-size:18px;
  background: linear-gradient(90deg,#e9eaff,#a1f7e8 35%,#caa7ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 24px rgba(167,65,245,0.4);
}
.nav-main a{ color:var(--ink); text-decoration:none; margin:0 8px; font-weight:700; font-size:14px; padding:8px 10px; border-radius:10px;}
.nav-main a:hover{ background:rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }

/* Layout */
.container{ width:100%; max-width:1200px; margin:0 auto; padding:26px 18px 80px; flex:1; }
.page-title{ font-family:'Montserrat'; font-size:32px; margin:6px 0 4px; letter-spacing:.6px;
  background: linear-gradient(90deg,#fff,#a1f7e8 35%,#d2b5ff);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.page-sub{ color:var(--ink-d); margin-bottom:18px; }

/* Grid like collection */
.grid{
  --min: 260px;
  display:grid; gap:16px;
  grid-template-columns: repeat(auto-fill, minmax(var(--min), 1fr));
}
.card{
  position:relative; overflow:hidden; border-radius:18px;
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  border:1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.05);
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .25s ease;
}
.card:hover{ transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.45), 0 0 0 1px rgba(36,255,211,0.25) inset; }
.thumb{
  height:150px; position:relative; overflow:hidden;
  background: radial-gradient(70% 70% at 50% 20%, rgba(36,255,211,0.22), rgba(167,65,245,0.3)),
              linear-gradient(145deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
}
.thumb::after{
  content:""; position:absolute; inset:0;
  background: conic-gradient(from 0deg, rgba(255,255,255,0.35), transparent 60%);
  mix-blend-mode: overlay; animation: swirl 8s linear infinite;
}
@keyframes swirl { to{ transform: rotate(360deg);} }
.badge{
  position:absolute; top:10px; left:10px; font-size:12px; font-weight:900;
  padding:6px 10px; border-radius:999px; color:#0b0f2a;
  background: linear-gradient(135deg, var(--purple), var(--teal));
  box-shadow: 0 10px 24px rgba(167,65,245,0.6);
}
.content{ padding:14px; display:flex; flex-direction:column; gap:8px; }
.title{ font-weight:800; letter-spacing:.3px; font-size:16px; }
.desc{ color:var(--ink-d); font-size:13px; }

.row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.cta{
  border:0; border-radius:12px; padding:10px 12px; font-weight:900; letter-spacing:.3px; cursor:pointer;
  color:#0b0f2a; background: linear-gradient(135deg, #ffffff, #e9eaff); box-shadow: 0 10px 26px rgba(255,255,255,0.28);
  text-decoration:none; display:inline-block;
}
.cta-accent{ background: linear-gradient(135deg, #a741f5, #24ffd3); color:#0b0f2a; box-shadow: 0 10px 28px rgba(167,65,245,0.55); }
.meta{ font-family:'Raleway'; font-size:12px; color:var(--ink-d); }

/* Locked state */
.feature-card.locked .cta{ opacity:.6; cursor:not-allowed; }

/* Footer */
.site-footer{
  margin-top:auto; padding:26px 18px; text-align:center; color:var(--ink-d);
  border-top:1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(12,17,71,0), rgba(12,17,71,0.4));
}
.foot-link{ color:var(--ink); text-decoration:underline; }