/* Rainbow Rampage — About the Project */
.about-project{
  position:relative;
  overflow:hidden;
  padding:96px 20px 110px;
  color:#fff!important;
  background:
    radial-gradient(circle at 10% 10%,rgba(255,0,212,.13),transparent 28%),
    radial-gradient(circle at 90% 35%,rgba(0,247,255,.10),transparent 30%),
    linear-gradient(180deg,#070108 0%,#030003 100%);
  border-top:1px solid rgba(255,255,255,.12);
}
.about-project::before{content:"ABOUT THE PROJECT";position:absolute;right:-2vw;top:70px;font:1000 clamp(54px,11vw,150px)/.8 Impact,"Arial Black",sans-serif;color:transparent;-webkit-text-stroke:2px rgba(255,255,255,.035);transform:rotate(3deg);pointer-events:none;white-space:nowrap}
.about-shell{position:relative;z-index:2;width:min(1120px,100%);margin:0 auto;color:#fff}
.about-intro{max-width:900px;margin:0 auto 56px;text-align:center}
.about-intro .section-kicker{margin-bottom:14px;color:#fff!important}
.about-title{margin:0;font:1000 clamp(52px,8vw,98px)/.84 Impact,"Arial Black",sans-serif;text-transform:uppercase;letter-spacing:-1.5px;text-shadow:5px 5px 0 #000;color:#fff!important}
.about-title span{display:block;color:#fff200!important;text-shadow:5px 5px 0 #000,0 0 22px rgba(255,242,0,.22)}
.about-intro p{max-width:840px;margin:28px auto 0;font:800 19px/1.65 Arial,Helvetica,sans-serif;color:#fff!important}
.about-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.about-card{position:relative;padding:30px;border:1px solid rgba(255,255,255,.14);border-radius:22px;background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),rgba(0,0,0,.52);box-shadow:0 18px 46px rgba(0,0,0,.34);overflow:hidden;color:#fff!important}
.about-card::after{content:"";position:absolute;right:-45px;bottom:-55px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(255,0,212,.22),transparent 68%);pointer-events:none}
.about-card.wide{grid-column:1/-1}
.about-card h3{margin:0 0 16px;font:1000 clamp(30px,4vw,48px)/.95 Impact,"Arial Black",sans-serif;text-transform:uppercase;color:#fff!important}
.about-card h3 span{color:#17f7ff!important}
.about-card p,.about-card li{font:700 16px/1.65 Arial,Helvetica,sans-serif;color:#fff!important}
.about-card p{margin:0 0 16px}.about-card p:last-child{margin-bottom:0}
.about-card ul{margin:18px 0 0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.about-card li{position:relative;padding:12px 14px 12px 37px;border:1px solid rgba(255,255,255,.1);border-radius:12px;background:rgba(255,255,255,.035)}
.about-card li::before{content:"✦";position:absolute;left:14px;top:11px;color:#fff200;font-family:Arial,sans-serif}
.principle{margin:24px 0 8px;padding:22px;text-align:center;border:2px solid rgba(255,255,255,.8);border-radius:16px;background:linear-gradient(90deg,rgba(255,0,212,.14),rgba(255,242,0,.10),rgba(0,247,255,.12));font:1000 clamp(18px,2.6vw,28px)/1.35 "Arial Black",Arial,sans-serif;color:#fff!important;text-shadow:2px 2px 0 #000}
.stage-list{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:22px}
.stage{padding:18px 14px;border-radius:14px;background:rgba(255,255,255,.045);border-top:3px solid #ff20c8;color:#fff!important}
.stage:nth-child(2){border-top-color:#ff8a00}.stage:nth-child(3){border-top-color:#fff200}.stage:nth-child(4){border-top-color:#36ff00}.stage:nth-child(5){border-top-color:#00f7ff}
.stage strong{display:block;margin-bottom:8px;font:1000 14px/1.1 "Arial Black",Arial,sans-serif;color:#fff!important;text-transform:uppercase}.stage p{margin:0;font-size:13px;line-height:1.5;color:#fff!important}
.about-finale{margin-top:26px;padding:34px;border-radius:24px;text-align:center;border:2px solid rgba(255,255,255,.16);background:radial-gradient(circle at 50% 0%,rgba(255,0,212,.17),transparent 42%),rgba(0,0,0,.62);color:#fff!important}
.about-finale h3{margin:0 0 16px;font:1000 clamp(38px,6vw,68px)/.9 Impact,"Arial Black",sans-serif;text-transform:uppercase;color:#fff!important}.about-finale p{max-width:850px;margin:0 auto 16px;font:800 18px/1.65 Arial,Helvetica,sans-serif;color:#fff!important}
.about-finale .closer{margin-top:22px;font:1000 clamp(23px,4vw,38px)/1.05 "Arial Black",Arial,sans-serif;color:#fff200!important;text-transform:uppercase;text-shadow:3px 3px 0 #000}

/* About content is always visible. These elements were manually given fun-reveal
   classes but weren't part of the observer target list, leaving them stuck at opacity:0. */
.about-project .fun-reveal{
  opacity:1!important;
  transform:none!important;
}

@media(max-width:820px){.about-project{padding:70px 16px 78px}.about-grid{grid-template-columns:1fr}.about-card.wide{grid-column:auto}.about-card{padding:24px}.about-card ul{grid-template-columns:1fr}.stage-list{grid-template-columns:1fr 1fr}.about-intro p{font-size:17px}.about-project::before{top:34px;right:-30vw}}
@media(max-width:520px){.stage-list{grid-template-columns:1fr}.about-title{font-size:clamp(45px,14vw,72px)}.about-card h3{font-size:36px}.about-finale{padding:26px 20px}}