/* ===== INDEX-ONLY ===== */

/* HERO full-bleed with refined warm mesh + aurora (no yellow) */
.hero.hero-fullbleed{
  position:relative; width:100vw;
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  min-height: calc(100vh - var(--navH, 80px));
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(1100px 600px at 15% -20%, rgba(255,74,74,.12), transparent 60%),
    radial-gradient(900px 420px  at 85% 0%,   rgba(255,138,102,.10), transparent 60%),
    radial-gradient(700px 360px  at 50% 110%, rgba(255,91,127,.08),  transparent 60%),
    linear-gradient(180deg, #0b0b0b, #131313);
}
.hero.hero-fullbleed::before{
  content:""; position:absolute; inset:-20%;
  background:
    radial-gradient(600px 300px at 20% 25%, rgba(255,90,90,.12), transparent 60%),
    radial-gradient(520px 280px at 80% 35%, rgba(255,120,100,.10), transparent 60%),
    radial-gradient(420px 240px at 50% 80%, rgba(255,91,127,.10),  transparent 60%);
  filter: blur(26px);
  animation: floatAurora 18s ease-in-out infinite alternate;
  z-index:0; pointer-events:none;
}
@keyframes floatAurora{ 0%{ transform: translate3d(-2%, -1%, 0) scale(1) } 100%{ transform: translate3d(2%, 1%, 0) scale(1.06) } }

.hero-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.28; z-index:0; pointer-events:none;
}
.hero.no-video .hero-video{ display:none; }

.hero .hero-overlay{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.68));
}
.hero h2, .hero p, .hero .btn{ position:relative; z-index:2 }
.hero h2{ font-size: clamp(30px, 3.8vw, 48px); margin:0 0 10px }
.hero p{ color:#d7d7d7; margin:0 auto 20px; max-width: 820px }

/* Steps */
.steps .steps-title{ font-size:26px; text-align:center; margin:0 0 18px; color:#fff }
.step-grid{ display:grid; grid-template-columns: repeat(5, minmax(160px,1fr)); gap:18px; align-items:stretch }
@media (max-width: 1100px){ .step-grid{ grid-template-columns: repeat(3, 1fr) } }
@media (max-width: 640px){ .step-grid{ grid-template-columns: 1fr } }

.step{
  background: linear-gradient(180deg,#191919,#121212);
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:18px; text-align:center; box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .25s ease;
}
.step:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(255,74,74,.22);
  border-color: rgba(255,120,100,.22);
  background: radial-gradient(220px 120px at 50% 0%, rgba(255,90,90,.05), transparent 60%), linear-gradient(180deg,#191919,#121212);
}
.step img{ height:52px; margin:8px auto 6px; opacity:.95 }
.step h4{ margin:8px 0 6px; color:#ffd0d0 }
.step p{ color:var(--muted); margin:0 }

/* Plans */
.plans .plans-title{ font-size:26px; text-align:center; margin:0 0 18px; color:#fff }
.plan-grid{ display:grid; grid-template-columns: repeat(4, minmax(240px,1fr)); gap:18px }
@media (max-width: 1100px){ .plan-grid{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){ .plan-grid{ grid-template-columns: 1fr } }

.plan{
  position:relative;
  background: linear-gradient(180deg,#1a1a1a,#121212);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px; padding:18px; text-align:center; cursor:pointer;
  box-shadow: var(--shadow-1);
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.plan-topband{
  content:""; position:absolute; left:0; right:0; top:0; height:6px; border-radius:16px 16px 0 0;
  /* REDS ONLY (removed yellow/amber) */
  background: linear-gradient(90deg, var(--accent), var(--rose), var(--coral));
  filter: saturate(1.05); opacity:.95;
}
.plan:hover{
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(255,74,74,.26);
  border-color: rgba(255,120,100,.22);
}
.plan:active, .plan.clicked, .plan.clicked:hover{ transform:none; box-shadow: var(--shadow-1) }

.plan h3{ margin:0 0 8px; color:#fff }
.plan .price{ font-weight:800; color:#ececec; margin:0 0 10px }
.plan .plan-details{
  max-height:0; overflow:hidden; transition:max-height .35s cubic-bezier(.22,1,.36,1), padding .2s ease;
  text-align:left; background:#0f0f0f; border:1px solid #222; border-radius:12px; padding:0 12px; margin-top:10px;
}
.plan.open .plan-details{ max-height:340px; padding:12px }
.plan .join-btn{
  display:inline-block; margin-top:10px;
  background: linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#0b0b0b !important; padding:10px 16px; border-radius:10px; font-weight:800;
}

/* Why (modern table): warm ONYX, gray Others */
.modern-table{
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px; overflow:hidden;
  background:
    radial-gradient(900px 340px at 90% -20%, rgba(255,90,90,.08), transparent 60%),
    linear-gradient(180deg,#101010,#141414);
  box-shadow: var(--shadow-1);
}
.table-row{ display:grid; grid-template-columns: 1.2fr 1fr 1fr }
.table-row > .cell{ padding:14px; border-bottom:1px solid rgba(255,255,255,.06) }
.table-row.header .cell{ background: rgba(255,255,255,.04); font-weight:800 }
.cell-onyx{ background: linear-gradient(180deg, rgba(255,74,74,.25), rgba(255,74,74,.08)); color:#fff }
.cell.other{ color:#ababab }
.cell.onyx{ background: linear-gradient(180deg, rgba(255,74,74,.18), rgba(255,74,74,.06)); color:#fff; font-weight:700 }
.cell.other{ color:#a9a9a9 }

/* Benefits */
.benefits{ display:grid; grid-template-columns: repeat(4, minmax(200px,1fr)); gap:18px }
@media (max-width: 1100px){ .benefits{ grid-template-columns: repeat(2, 1fr) } }
@media (max-width: 640px){ .benefits{ grid-template-columns: 1fr } }
.benefit{
  background:#151515; border:1px solid rgba(255,255,255,.06);
  border-radius:14px; padding:16px; text-align:center; box-shadow: var(--shadow-1);
}

/* FAQ */
.faq h3{ text-align:center; color:#fff; margin-bottom:16px }
.faq .faq-item{
  border:1px solid rgba(255,255,255,.06); border-radius:12px; padding:0; margin:12px 0; background:#121212; cursor:pointer;
  transition: border-color .2s ease, background .2s ease;
}
.faq .faq-item:hover{ border-color: rgba(255,120,100,.22); background: #141414; }
.faq .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:14px 16px; font-weight:800; color:#ffd0d0 }
.faq .faq-a{ color:#cfcfcf; padding:0 16px 14px; display:none }
.faq .faq-item.open .faq-a{ display:block }

/* Buttons stay clickable above overlays */
.hero .hero-overlay, .hero .hero-video, .hero::before{ pointer-events:none }
.hero a.btn{ pointer-events:auto }
/* Plans layout: each SIZE gets two cards side-by-side (Sapphire | Diamond) */
.plan-grid-2col{
  display:grid;
  grid-template-columns:repeat(2, minmax(280px, 1fr));
  gap:16px;
}
@media (max-width:900px){
  .plan-grid-2col{ grid-template-columns:1fr; }
}

/* Card */
.plan-card{
  background:#0f0f0f;
  border:1px solid #242424;
  border-radius:16px;
  padding:16px;
  position:relative;
  overflow:hidden;
}
.plan-card .topband{
  position:absolute; inset:0 auto auto 0; height:4px; width:100%;
  background:linear-gradient(90deg, rgba(255,58,58,.85), rgba(255,58,58,.35));
}
.plan-card.hollow .topband{
  background:linear-gradient(90deg, rgba(255,255,255,.65), rgba(255,255,255,.25));
}

.plan-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin-top:6px;
}
.plan-head h3{ margin:0; }
.plan-badge{
  font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid #333; color:#ddd;
}
.plan-price{ color:#ffb3b3; font-weight:800; }

/* Always-visible details */
/* --- Plans: picker layout --- */
.plans .plans-title{font-size:22px;font-weight:800;margin-bottom:10px}

.plan-type-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.plan-tab{background:#121212;border:1px solid #222;border-radius:999px;padding:10px 14px;color:#fff;cursor:pointer}
.plan-tab.active{border-color:#ff3333;box-shadow:0 0 0 2px rgba(255,51,51,.12) inset}

.size-row{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.size.chip{background:#121212;border:1px solid #222;border-radius:999px;padding:8px 12px;cursor:pointer}
.size.chip.active{border-color:#ff3333;box-shadow:0 0 0 2px rgba(255,51,51,.12) inset}

.plan-compare{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:900px){.plan-compare{grid-template-columns:1fr}}

.plan-card{
  background:linear-gradient(180deg,#101010,#0d0d0d);
  border:1px solid #202020;border-radius:14px;padding:18px
}
.plan-card.ghost{opacity:.96}

.pc-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.pc-title{font:800 18px/1.2 Inter,system-ui}
.pc-sub{color:var(--muted);font-size:13px}
.pc-price{font-weight:800}
.pc-price small{opacity:.7;font-weight:700}

.rules{width:100%;border-collapse:collapse;margin-top:6px}
.rules th,.rules td{padding:10px;border-top:1px solid #1a1a1a;vertical-align:middle}
.rules th{color:#bbb;text-align:left;width:48%}
.rules td{color:#eee}
.rules .ok{color:#22c55e;font-weight:700}
.rules .warn{color:#eab308;font-weight:700}
.rules .bad{color:#ef4444;font-weight:700}

/* Bigger, more readable buttons in the plan cards */
.pc-actions .btn{
  padding:14px 18px;      /* was 10px 14px */
  font-size:16px;         /* add this */
  border-radius:12px;
}
/* Optional: ensure the Join CTA uses the site’s red gradient */
.plan-card .btn-cta{
  background:linear-gradient(135deg,var(--accent,#ff3a3a),#ff6b6b);
  color:#000;
  font-weight:800;
}
/* ===== Plans: scoped visuals & selection animation ===== */
#plans .plans-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 16px;
}
@media (max-width: 1080px){
  #plans .plans-grid{ grid-template-columns: repeat(2, minmax(260px, 1fr)); }
}
@media (max-width: 720px){
  #plans .plans-grid{
    grid-template-columns: 1fr;
    justify-items: center;          /* center cards on phones */
  }
}

#plans .plan-card{
  position: relative;
  background: #111;
  border: 1px solid #222;
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-1);
  transition: transform .2s ease, box-shadow .25s ease, filter .25s ease;
}
#plans .plan-card:hover{ transform: translateY(-2px); filter: saturate(1.04); }

/* Diamond (light blue glow) */
#plans .plan--diamond{
  --glow: rgba(140, 205, 255, .55);
  --glow-ring: rgba(140, 205, 255, .28);
  box-shadow:
    0 0 0 1px var(--glow-ring),
    0 14px 36px var(--glow);
}
#plans .plan--diamond .plan-title{
  display:flex; align-items:center; gap:8px; font-weight:800;
}
#plans .plan--diamond .plan-title::before{
  content:"♦";
  font-size: 18px;
  line-height: 1;
  color: #8fd3ff;
  filter: drop-shadow(0 0 8px rgba(140,205,255,.65));
}

/* Sapphire (warm red glow to match brand) */
#plans .plan--sapphire{
  --glow: rgba(255, 74, 74, .55);
  --glow-ring: rgba(255, 74, 74, .28);
  box-shadow:
    0 0 0 1px var(--glow-ring),
    0 14px 36px var(--glow);
}

/* “Refresh” bump when a plan is selected */
#plans .plan-card.is-selected{
  animation: planRefresh .6s cubic-bezier(.22,1,.36,1);
  box-shadow:
    0 0 0 2px var(--glow, rgba(255,74,74,.45)),
    0 20px 60px var(--glow, rgba(255,74,74,.45));
}
@keyframes planRefresh{
  0%   { transform: scale(.985); filter: saturate(.9) }
  60%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* Buttons inside plans: ensure not cut off & centered on mobile */
#plans .plan-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
#plans .plan-actions .btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:44px; line-height:1; padding:12px 16px;
}

/* ===== Mobile centering for the header/nav so everything looks centered ===== */
@media (max-width: 720px){
  header .nav{
    flex-wrap: wrap;
    justify-content: center;      /* center logo + links + CTA */
    gap: 8px;
    text-align: center;
  }
  header nav { width:100%; display:flex; justify-content:center; flex-wrap:wrap; row-gap:6px; }
  header nav a, header nav .btn-cta { margin: 0 6px; }
}