:root{
  --bg:#0b0b10;
  --panel:#12121a;
  --card:#171826;
  --fg:#eef0f4;
  --muted:#a9b0bd;
  --line:rgba(255,255,255,.06);
  --acc:#8b5cf6;
  --acc-ghost:rgba(139,92,246,.15);
  --shadow:0 8px 24px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:radial-gradient(1200px 600px at 50% -100px, rgba(139,92,246,.15), transparent 60%), var(--bg);
  color:var(--fg);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1100px;margin:0 auto;padding:24px}

/* Header styling */
.site-header {
  border-bottom: 1px solid var(--line);
  background: linear-gradient(to bottom, rgba(255,255,255,.02), transparent);
  padding: 12px 0;
}

/* Center the text inside the header */
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Gradient text for brand name */
.brand-name {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: 1px;

  background: linear-gradient(90deg, #c084fc, #8b5cf6);
  background-clip: text;          /* Standard */
  -webkit-background-clip: text;  /* Safari/Chrome */
  color: transparent;             /* Standard */
  -webkit-text-fill-color: transparent; /* Safari/Chrome */
}

/* Sub-tagline */
.brand-tag {
  font-size: 14px;
  color: var(--muted);
  margin-top: 4px;
  letter-spacing: 0.3px;
}

.hero{padding:28px 0 8px}
.badge{display:inline-block;padding:4px 10px;border-radius:999px;background:var(--acc-ghost);color:#c4b5fd;font-size:12px}
.hero-title{font-size:40px;line-height:1.1;margin:10px 0 6px}
.hero-sub{color:var(--muted);max-width:700px}

.offers{padding:10px 0 8px}
.cards{
  display:grid;gap:18px;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:22px;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
}
.card-title{margin:0 0 6px;font-size:20px}
.price{font-size:24px;font-weight:700;margin:4px 0 10px}
.muted{color:var(--muted);font-weight:500}
.list{margin:8px 0 16px 18px;color:var(--fg)}
.list li{margin:6px 0}
.btn{
  display:inline-block;align-self:flex-start;
  background:var(--acc);color:#fff;text-decoration:none;
  padding:12px 16px;border-radius:12px;font-weight:600;
  box-shadow:0 8px 22px rgba(139,92,246,.35);
  transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(139,92,246,.45)}
.btn:active{transform:translateY(0);opacity:.9}

.faq{padding:18px 0 36px;border-top:1px solid var(--line);margin-top:12px}
.faq h2{margin:0 0 10px}
.faq-item{margin:10px 0}
.faq-item h3{margin:0 0 4px}
.faq-item p{margin:0;color:var(--muted)}

.site-footer{border-top:1px solid var(--line);padding:18px 0;color:var(--muted)}
/* Responsive tweaks */
@media (max-width:520px){
  .brand-name{font-size:24px}
  .hero-title{font-size:32px}
}

/* === Brand banner (full width inside container, same width as cards) === */
.brand-banner { margin: 18px 0 6px; }

.logo-banner{
  height: 160px;  /* a bit taller so the background reads well */
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;

  /* BACKGROUND LAYERS:
     - GIF (bottom)
     - subtle dark gradient overlay (top) to keep text/logo readable
  */
  background:
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.25)),
    url('assets/ThemePageBackgroundWithLightning-ezgif.com-optimize.gif') center/cover no-repeat;
}


/* subtle glow bar behind */
.logo-banner::after{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(500px 140px at 50% 50%, rgba(139,92,246,.10), transparent 60%);
  pointer-events:none;
}

/* logo centered inside banner, keep height steady */
.logo-mark {
  width: 100%;           /* fill container width */
  height: 100%;          /* match banner height */
  object-fit: contain;   /* stretch width but preserve aspect ratio */
  object-position: center;
  opacity: 60%;
  filter: drop-shadow(0 8px 18px rgba(139,92,246,.45));
}


/* small screens: reduce height and logo size */
@media (max-width: 520px){
  .logo-banner{ height: 96px; }
  .logo-mark{ height: 56px; }
}

@media (max-width:520px) {
  .hero-logo {
    width: 100px;
  }
}

/* ========== Discord CTA Panel ========== */
.discord-cta { margin: 28px 0 10px; }

.discord-cta__panel{
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);

  /* ✅ Use your uploaded background */
  background:
    linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35)),
    url('assets/Discord Connect Background.png') center/cover no-repeat,
    var(--card);

  min-height: 220px;
  display: grid;
  place-items: center;
}

.discord-cta__content{
  text-align: center;
  padding: 28px 20px;
  max-width: 760px;
}

.discord-cta__title{
  margin: 0 0 6px;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: .3px;
  background: linear-gradient(90deg, #c084fc, #8b5cf6);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.discord-cta__sub{
  margin: 0 0 14px;
  color: var(--fg);
  opacity: .9;
}

.discord-cta__btn{
  padding: 12px 18px;
  box-shadow: 0 10px 26px rgba(139,92,246,.45);
}
.discord-cta__btn:hover{ transform: translateY(-1px); }

@media (max-width: 520px){
  .discord-cta__panel{ min-height: 200px; }
  .discord-cta__title{ font-size: 24px; }
}

/* Utilities for call pages */
.panel{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow: var(--shadow);
  padding:22px;
}
.center{text-align:center}
.mt{margin-top:10px}
.mt-6{margin-top:16px}
.mt-8{margin-top:20px}
.grid-2{display:grid; grid-template-columns: 2fr 1fr; gap:18px}
.h2{margin:0 0 8px; font-size:22px}
.h3{margin:0 0 6px; font-size:18px}
.num{list-style: decimal; margin-left: 20px}
.divider{height:1px; background:var(--line); margin:14px 0}
.btn-lg{padding:14px 18px; font-size:16px}
.btn-block{display:block; width:100%; text-align:center}
.cta-row{display:flex; align-items:center; gap:14px; margin-top:14px; flex-wrap:wrap}
.trust-mini{font-size:12px; color:var(--muted)}
.trust-mini .lock{margin-right:6px}

/* Responsive */
@media (max-width: 900px){
  .grid-2{grid-template-columns: 1fr}
}

/* ===== Video embed ===== */
.video-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.video{
  width: 100%;
  height: auto;
  border-radius: 10px;
  display: block;
  outline: none;
}

/* 16:9 video frame */
.video-frame{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;      /* modern browsers */
  border-radius: 10px;
  overflow: hidden;
  background: #000;          /* fallback background while loading */
}

/* Fallback for older browsers without aspect-ratio */
@supports not (aspect-ratio: 16 / 9) {
  .video-frame{ padding-bottom: 56.25%; height: 0; }
  .video-frame .video{ position: absolute; inset: 0; }
}

.video{
  width: 100%;
  height: 100%;
  object-fit: cover;         /* fill the frame nicely; switch to 'contain' if you prefer letterboxing */
  display: block;
  outline: none;
}

/* If using YouTube/Vimeo iframe instead */
.video-embed{ position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 10px; overflow: hidden; }
.video-embed iframe{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ===== Icon steps ===== */
.icon-steps{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 10px;
}
.icon-step{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  text-align: center;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.icon-step:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(139,92,246,.30);
  border-color: rgba(139,92,246,.35);
}
.icon-step .icon{
  width: 36px; height: 36px; margin: 0 auto 8px;
  color: #c4b5fd; /* brand accent */
}
.icon-step svg{ width: 100%; height: 100%; display:block }
.step-title{ font-weight: 700; margin-bottom: 4px }
.step-sub{ color: var(--muted); font-size: 13px; line-height: 1.25 }

/* Responsive */
@media (max-width: 900px){
  .icon-steps{ grid-template-columns: 1fr; }
}

/*Subtitle Styling */
.section-heading {
  font-size: 20px;
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 10px;
  position: relative;
  padding-bottom: 6px;
}

.section-heading::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 36px; /* short underline, keeps it classy */
  height: 3px;
  background: var(--acc);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(139,92,246,0.6); /* subtle glow */
}

/* ===== Flow steps (Workshop) ===== */
.flow{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}
.flow-step{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  text-align:center;
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.flow-step:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(139,92,246,.30);
  border-color: rgba(139,92,246,.35);
}
.flow-icon{
  width:40px;height:40px;margin:0 auto 8px;
  display:grid;place-items:center;
  border-radius:999px;
  background: var(--acc-ghost);
  color:#c4b5fd;
}
.flow-icon svg{ width:22px; height:22px; }
.flow-title{ font-weight:700; margin-bottom:4px; }
.flow-sub{ color:var(--muted); font-size:13px; line-height:1.3; }

/* 16:9 video (reuses your earlier video styles if present) */
.video-wrap{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--shadow);
}
.video-frame{
  position: relative; width:100%;
  aspect-ratio: 16 / 9; border-radius:10px; overflow:hidden; background:#000;
}
@supports not (aspect-ratio: 16 / 9){
  .video-frame{ padding-bottom:56.25%; height:0; }
  .video-frame .video{ position:absolute; inset:0; }
}
.video{ width:100%; height:100%; object-fit:cover; display:block; outline:none; }
.small{ font-size:12px; }

/* Responsive */
@media (max-width: 1000px){
  .flow{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 520px){
  .flow{ grid-template-columns: 1fr; }
}

/* ===== Membership perks grid ===== */
.perks{
  display:grid;
  gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr));
  margin-top:6px;
}
.perk{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
  box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.perk:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(139,92,246,.30);
  border-color: rgba(139,92,246,.35);
}
.perk-icon{
  width:40px;height:40px;margin-bottom:8px;
  display:grid;place-items:center;
  border-radius:999px;
  background: var(--acc-ghost);
  color:#c4b5fd;
  font-size:18px;
}
.perk-title{ font-weight:700; margin-bottom:4px }
.perk-sub{ color:var(--muted); }

/* Small note block */
.note{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  color:var(--muted);
}

/* Reuse wins styles from workshop page (if not present) */
.wins{
  margin-top:10px;
  display:grid; gap:14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.win{
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent 30%), var(--card);
  border:1px solid var(--line);
  border-radius:16px;
  padding:18px;
  box-shadow: var(--shadow);
}
.win-title{ margin:0 0 6px; font-size:18px; font-weight:700 }