/* Why CanCapperZ? — features & benefits. Preview page.
   Navy/slate base, purple-forward space, orange/gold accents. */
.why-page{
  --why-bg:#110b1f;
  --why-bg-2:#1a1233;
  --why-bg-3:#161028;
  --why-purple:rgba(148,82,220,.38);
  --why-purple-2:rgba(98,48,180,.32);
  --why-gold:#FFD27A;
  --why-gold-2:#ffc14d;
  --why-text:#F6F2FF;
  --why-muted:#C9C3DC;
  --why-line:rgba(210,190,255,.16);
  --why-card:linear-gradient(180deg,rgba(48,32,86,.62),rgba(22,16,42,.82));
  background:var(--why-bg);
  color:var(--why-text);
}
.why-page .section-lead,
.why-page .kicker{color:var(--why-gold)}
.why-page .kicker{color:#FFC89A}
.why-page a{color:#FFC89A}
.why-page a:hover{color:#fff}

/* Full-page purple space */
.why-space{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse 80% 46% at 50% -8%,rgba(156,78,230,.42),transparent 62%),
    radial-gradient(ellipse 48% 36% at 92% 16%,rgba(92,36,170,.4),transparent 68%),
    radial-gradient(ellipse 42% 30% at 8% 48%,rgba(255,106,19,.12),transparent 70%),
    radial-gradient(ellipse 50% 28% at 70% 88%,rgba(120,60,200,.22),transparent 72%),
    linear-gradient(180deg,#140c26 0%,#1a1235 42%,#17102c 78%,#110b1f 100%);
}
.why-space-bg,
.why-nebula,
.why-dust{
  position:absolute;inset:0;pointer-events:none;z-index:0;
}
.why-nebula{
  inset:-20% -14%;
  background:
    radial-gradient(ellipse 40% 34% at 22% 28%,rgba(150,80,230,.34),transparent 68%),
    radial-gradient(ellipse 36% 30% at 80% 22%,rgba(92,40,170,.3),transparent 66%),
    radial-gradient(ellipse 44% 26% at 56% 82%,rgba(255,106,19,.1),transparent 70%);
  animation:why-nebula 80s ease-in-out infinite alternate;
}
.why-dust{
  opacity:.7;
  background-image:
    radial-gradient(1px 1px at 18px 28px,rgba(255,255,255,.55),transparent),
    radial-gradient(1.1px 1.1px at 86px 116px,rgba(230,210,255,.5),transparent),
    radial-gradient(1px 1px at 164px 48px,rgba(255,255,255,.4),transparent),
    radial-gradient(1.15px 1.15px at 246px 176px,rgba(255,200,160,.32),transparent),
    radial-gradient(1px 1px at 308px 88px,rgba(255,255,255,.45),transparent),
    radial-gradient(.9px .9px at 48px 208px,rgba(210,190,255,.4),transparent),
    radial-gradient(1px 1px at 210px 236px,rgba(255,255,255,.32),transparent),
    radial-gradient(1.05px 1.05px at 340px 22px,rgba(255,230,255,.42),transparent);
  background-size:360px 260px;
  animation:why-dust 180s linear infinite;
}
@keyframes why-nebula{
  0%{transform:translate3d(-2%,-1.5%,0) scale(1)}
  100%{transform:translate3d(2.5%,2%,0) scale(1.05)}
}
@keyframes why-dust{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(0,-260px,0)}
}

/* Hero */
.why-hero{
  position:relative;
  z-index:1;
  text-align:center;
  padding:2.4rem 0 1.6rem;
  color:var(--why-text);
}
.why-hero .eyebrow{
  color:#ffd0b0;
  background:rgba(255,106,19,.16);
  border-color:rgba(255,106,19,.5);
}
.why-hero h1{
  font-size:clamp(2.15rem,11vw,4.6rem);
  line-height:1.02;
  margin:1rem 0 .7rem;
  font-weight:900;
  font-style:italic;
  text-transform:uppercase;
  letter-spacing:-.02em;
  color:#fff;
  text-shadow:
    0 0 28px rgba(170,90,255,.55),
    0 0 56px rgba(255,106,19,.28),
    0 8px 30px rgba(0,0,0,.45);
}
.why-hero h1 .z{
  color:var(--orange);
  background:linear-gradient(180deg,#ffa166,var(--orange) 58%,#e2560a);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,106,19,.55));
}
.why-lead{
  margin:0 auto .95rem;
  max-width:36rem;
  font-size:clamp(1.02rem,2.8vw,1.22rem);
  font-weight:650;
  color:var(--why-text);
  line-height:1.5;
}
.why-slogan{
  max-width:36rem;
  margin:0 auto 1.25rem;
  padding:.85rem 1.05rem;
  font-size:.92rem;
  font-weight:600;
  line-height:1.5;
  color:#efeafc;
  background:rgba(18,12,36,.5);
  border:1px solid var(--why-line);
  border-radius:16px;
  box-shadow:0 0 28px rgba(140,80,220,.16),inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.why-slogan strong{color:#fff;font-weight:800}

.why-jump{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem;
  margin:1.1rem auto 0;
  max-width:40rem;
  padding:0;
  list-style:none;
}
.why-jump a{
  display:inline-flex;
  align-items:center;
  font-size:.75rem;
  font-weight:800;
  letter-spacing:.04em;
  text-transform:uppercase;
  text-decoration:none;
  color:#efe8ff;
  background:rgba(255,255,255,.05);
  border:1px solid var(--why-line);
  border-radius:999px;
  padding:.38rem .7rem;
}
.why-jump a:hover,
.why-jump a:focus-visible{color:#fff;border-color:rgba(255,106,19,.55);background:rgba(255,106,19,.16)}

/* Groups */
.why-groups{
  position:relative;
  z-index:1;
  padding:1rem 0 2.25rem;
}
.why-group{
  --why-glow:rgba(148,82,220,.28);
  margin:0 auto 1.15rem;
  max-width:56rem;
  padding:1.35rem 1.1rem 1.2rem;
  border-radius:24px;
  background:var(--why-card);
  border:1px solid var(--why-line);
  box-shadow:0 0 36px var(--why-glow),0 16px 40px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.07);
}
.why-group-head{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  margin:0 0 1rem;
  gap:.55rem;
}
.why-ico{
  width:3rem;height:3rem;
  border-radius:14px;
  display:grid;place-items:center;
  color:#fff;
  background:linear-gradient(145deg,var(--orange-2),#e2560a);
  box-shadow:0 10px 22px rgba(255,106,19,.38),0 0 22px rgba(255,106,19,.28);
}
.why-ico svg{width:1.45rem;height:1.45rem}
.why-group h2{
  font-size:clamp(1.25rem,4.4vw,1.85rem);
  margin:0;
  color:#fff;
  text-shadow:0 0 18px rgba(170,90,255,.35);
}
.why-group-lead{
  margin:.15rem 0 0;
  max-width:36rem;
  font-size:.92rem;
  font-weight:600;
  line-height:1.5;
  color:var(--why-muted);
  text-align:center;
}
.why-group-lead strong{color:#fff}

/* Chip grid — compact, small letters, semantic list */
.why-chips{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.45rem;
}
.why-chips li{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  max-width:100%;
  font-size:.8rem;
  font-weight:700;
  line-height:1.3;
  color:var(--why-text);
  background:rgba(255,255,255,.05);
  border:1px solid var(--why-line);
  border-radius:999px;
  padding:.42rem .78rem .42rem .5rem;
  box-shadow:0 0 16px rgba(140,80,220,.12),inset 0 1px 0 rgba(255,255,255,.06);
}
.why-chips .chip-ico{
  width:1.2rem;height:1.2rem;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  color:#fff;
  background:linear-gradient(145deg,rgba(255,138,61,.95),rgba(226,86,10,.95));
  box-shadow:0 0 10px rgba(255,106,19,.35);
}
.why-chips .chip-ico svg{width:.72rem;height:.72rem}

/* Protect callout inside its group */
.why-callout{
  margin:1rem auto 0;
  max-width:38rem;
  padding:.9rem 1.05rem;
  font-size:.9rem;
  font-weight:600;
  line-height:1.5;
  color:#efeafc;
  text-align:center;
  background:rgba(18,12,36,.5);
  border:1px solid rgba(255,106,19,.35);
  border-radius:16px;
  box-shadow:0 0 24px rgba(255,106,19,.12);
}
.why-callout strong{color:#fff}

/* Are you protected? */
.why-protected{
  position:relative;
  z-index:1;
  text-align:center;
  padding:clamp(2.6rem,9vw,5rem) 0 clamp(3rem,10vw,5.5rem);
  overflow:hidden;
}
.why-protected-glow{
  position:absolute;
  left:50%;top:42%;
  width:min(90%,36rem);height:12rem;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(ellipse at 50% 50%,rgba(255,106,19,.45),rgba(160,80,230,.22) 46%,transparent 72%);
  filter:blur(28px);
  pointer-events:none;
  animation:why-glow 5.5s ease-in-out infinite;
}
@keyframes why-glow{
  0%,100%{opacity:.85;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}
.why-protected h2{
  position:relative;
  font-size:clamp(2.35rem,13vw,5.4rem);
  line-height:.98;
  margin:0 0 .7rem;
  color:#fff;
  text-transform:uppercase;
  font-weight:900;
  font-style:italic;
  letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff8ee,#FFD27A 42%,var(--orange) 82%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,106,19,.55)) drop-shadow(0 0 48px rgba(160,80,230,.4));
}
.why-protected-sub{
  position:relative;
  margin:0 auto 1.45rem;
  font-size:clamp(1.05rem,3.4vw,1.45rem);
  font-weight:800;
  font-style:italic;
  letter-spacing:.04em;
  color:#fff;
  text-shadow:0 0 18px rgba(170,90,255,.4);
}
.why-protected .hero-actions{
  position:relative;
  margin-bottom:1.15rem;
}
.why-protected .btn-primary{
  box-shadow:0 8px 28px rgba(255,106,19,.5),0 0 24px rgba(255,106,19,.28);
}
/* F: Browse All contrast — beat .why-page a {color:#FFC89A} (peach on orange ≈ 1.91:1).
   White on #c24a07 = 4.91:1, on #a83f06 = 6.22:1. Same pair as the hero / launch CTA. */
.why-page a.btn-primary,
.why-protected .btn-primary,
.why-page a.btn-primary:hover,
.why-protected .btn-primary:hover,
.why-page a.btn-primary:focus-visible,
.why-protected .btn-primary:focus-visible{
  background:linear-gradient(180deg,#c24a07,#a83f06);
  color:#fff;
  box-shadow:0 8px 22px rgba(194,74,7,.45),0 0 24px rgba(255,106,19,.28);
}

.why-protected .btn-ghost{
  background:rgba(255,255,255,.06);
  color:#fff;
  border-color:rgba(255,255,255,.35);
}
.why-protected .btn-ghost:hover{color:#fff;border-color:#fff}
.why-protected .why-slogan{margin-top:.4rem}

.why-page .site-footer{
  background:#0b0814;
  border-top:1px solid rgba(210,190,255,.1);
}

@media (min-width:720px){
  .why-group{padding:1.65rem 1.6rem 1.45rem}
  .why-chips li{font-size:.84rem}
  .why-hero{padding:3rem 0 2rem}
}
@media (max-width:390px){
  .why-hero{padding:1.85rem 0 1.3rem}
  .why-chips li{font-size:.76rem;padding:.38rem .68rem .38rem .42rem}
  .why-group{padding:1.15rem .85rem 1.05rem;border-radius:20px}
  .why-protected h2{font-size:clamp(2.15rem,14vw,3rem)}
  .why-protected .hero-actions{flex-direction:column;align-items:stretch;padding:0 .1rem}
  .why-protected .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .why-nebula,
  .why-dust,
  .why-protected-glow{animation:none !important}
  .why-nebula{transform:none}
}

.why-group,.why-protected,.why-hero,.club-section,.club-hero,.club-card{scroll-margin-top:84px}