:root{
  --bg:#ffffff;
  --text:#222;
  --accent:#d952c2;
  --accent2:#f18dfe;
  --muted:#777;
  --card-bg:#f8f9fa;
  --border:#e2e8f0;
  --ring:#ff7be7;
}

/* Base & performance */
.about-page{background:var(--bg);padding-top:6rem;position:relative;overflow:hidden;min-height:100vh;z-index:1;}
.about-container{max-width:1100px;margin:auto;padding:0 24px;position:relative;z-index:3;color:var(--text);}
.about-page,.about-page *{contain:layout style;}
.about-page img{transform:translateZ(0);}
.fade-in,.scale-in{will-change:transform,opacity;}

/* Orbs & particles */
.orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;animation:orbFloat 18s ease-in-out infinite;opacity:.45;}
.orb-1{width:320px;height:320px;background:#d952c3a9;top:12%;left:4%;}
.orb-2{width:260px;height:260px;background:#d952c2a9;top:55%;right:8%;animation-delay:6s;}
.orb-3{width:220px;height:220px;background:#d952c2;bottom:18%;left:28%;animation-delay:12s;}
@keyframes orbFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-60px) scale(1.12)}}
.particle{position:absolute;width:5px;height:5px;background:var(--accent);border-radius:50%;opacity:.55;box-shadow:0 0 8px var(--accent);animation:particleMove 14s linear infinite;}
.p1{top:12%;left:15%}.p2{top:28%;left:78%}.p3{top:56%;left:10%}.p4{top:72%;left:68%}.p5{top:44%;left:44%}.p6{top:20%;left:38%}.p7{top:66%;left:86%}
@keyframes particleMove{0%{transform:translateY(0)}100%{transform:translateY(-220px)}}

/* Hero */
.hero{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:center;margin-bottom:70px;}
.stroke{text-transform:uppercase;font-weight:900;color:#000000;}
.accent{color:var(--accent);}
.meta{font-size:1.2rem;margin-top:.5rem;font-weight:700;}
.hero-left h1{font-size:3.2rem;line-height:1;margin-bottom:12px;background:linear-gradient(135deg,var(--text),var(--accent));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:titleFloat 3s ease-in-out infinite;}
@keyframes titleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.tag-cloud{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.tag-cloud span{font-size:.70rem;padding:6px 12px;border:1px solid rgba(0,181,173,.45);border-radius:999px;transition:.35s;}
.tag-cloud span:hover{border-color:var(--accent);box-shadow:0 0 16px rgba(0,181,173,.5);transform:translateY(-4px);}
.hero-right{position:relative;min-height:420px;}
.accent-block{position:absolute;top:-20px;left:-20px;width:calc(100% - 40px);height:90%;background:linear-gradient(135deg,var(--accent2),rgba(10,124,158,.6));border-radius:12px;animation:floatBlock 6s ease-in-out infinite;z-index:1;}
@keyframes floatBlock{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.hero-image{display:block;width:100%;max-width:560px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;box-shadow:0 22px 70px rgba(0,0,0,.12);position:relative;z-index:2;margin-left:auto;}
.is-shrink{transform:scale(.95);transform-origin:top right;}

/* Intro */
.intro{display:grid;grid-template-columns:.95fr 1.35fr;gap:48px;margin:80px 0;align-items:start;}
.text-justify{text-align:justify;}
.intro-copy{max-width:62ch;display:grid;gap:1rem;}
.intro-copy p{font-size:1.05rem;line-height:1.8;color:var(--text);margin:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-wrap:anywhere;hyphens:auto;}
.lead{font-weight:700;}
.intro-right{display:flex;flex-direction:column;gap:22px;}
.intro-row{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.about-img-2,.about-img-3{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--border);display:block;}
.intro-card{background:var(--card-bg);padding:20px;border-radius:12px;border:1px solid var(--border);display:flex;flex-direction:column;gap:12px;}
.about-img-4{width:90%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;border:1px solid var(--border);display:block;}

/* Question */
.question{text-align:center;margin:100px 0;}
.tight{letter-spacing:-.3px;}
.question-row{display:flex;justify-content:center;align-items:center;gap:28px;margin-top:28px;}
.face{width:fit-content;height:90px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:2px solid transparent;}
.reason {text-align:left;font-size:30px;font-weight:700;color:#ffffff;}
.question-container{width:100%;max-width:1200px;margin:0 auto;padding:30px;border:2px solid #ffffff33;border-radius:15px;background:#000000;}

/* Values */
.values{margin:100px 0;padding:60px 0;background:linear-gradient(135deg,#fef6ff,#ffeefd);border-radius:16px;border:1px solid #ffd2f4;}
.values-title{color:#000;text-align:center;font-size:2rem;margin-bottom:32px;}
.values-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:800px;margin:0 auto;}
.value-item{padding:24px;background:#fff;border-radius:12px;border-left:4px solid var(--accent);border:1px solid var(--border);transition:.3s;}
.value-item:hover{transform:translateX(8px);box-shadow:-8px 8px 24px #ffd0f3;}
.value-item h4{font-size:1.15rem;margin-bottom:8px;color:var(--accent);}
.value-item p{color:var(--muted);}

/* Split (REFINED) */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin:80px 0;align-items:center;}
/* pink bordered panel + subtle inner glow for speed (no heavy filters) */
.boxed{border:2px solid var(--ring);border-radius:16px;padding:28px;background:radial-gradient(1200px 500px at 30% 50%, rgba(255,123,231,.15), transparent 60%);}
.split-left{min-width:0;}
.split-left .heading-dark{color:#000;margin:0 0 12px;}
.split-copy{display:grid;gap:12px;max-width:60ch;font-size:1.05rem;line-height:1.8;}
.link-underline{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;}
.split-figure{display:flex;align-items:center;justify-content:center;}
.stack{display:block;max-width:650px;width:200%;height:20rem;}

/* Closing */
.closing{margin:100px 0 60px;text-align:center;}
.closing-title{color:#000000;}
.font-bobby{font-family:"Bobby Jones", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;}
.btn-join-beta{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;position:relative;margin-top:2rem;padding:.9rem 1.4rem;border:1px solid var(--border);border-radius:999px;text-decoration:none;font-weight:700;color:#fff;background:#000000;}
.btn-join-beta .neon-glow{position:absolute;inset:-4px;border-radius:inherit;box-shadow:0 0 24px rgba(0, 0, 0, 0);pointer-events:none;}

/* Footer */
.about-logo{text-align:center;margin:60px 0 40px;}
.mark{font-size:2.2rem;}

/* Animations (visibility) */
.fade-in{opacity:0;transform:translateY(40px);filter:blur(6px);}
.fade-in.is-visible{opacity:1;transform:none;filter:none;transition:.85s;}
.fade-stagger>*{opacity:0;transform:translateY(40px);}
.fade-stagger.is-visible>*{opacity:1;transform:none;transition:.85s;}
.scale-in{opacity:0;transform:scale(.98);}
.scale-in.is-visible{opacity:1;transform:scale(1);transition:.6s cubic-bezier(.16,.84,.44,1);}
.parallax-layer{transition:transform .3s ease-out;}

/* Responsive */
@media (max-width:1200px){
  .hero-left h1{font-size:2.8rem}
  .intro-copy p{font-size:1rem}
}
@media (max-width:980px){
  .split{grid-template-columns:1fr;gap:24px;}
  .boxed{padding:22px;}
  .split-figure{order:3}
  .stack{max-width:220px;margin-inline:auto;}
}
@media (max-width:900px){
  .hero,.intro,.values-grid{grid-template-columns:1fr}
  .hero-left h1{font-size:2.2rem}
  .intro{gap:40px;margin:60px 0}
  .intro-row{grid-template-columns:1fr}
}
@media (max-width:640px){
  .about-container{padding:0 14px}
  .hero-left h1{font-size:1.8rem}
  .split-copy{font-size:1rem}
  .font-bobby{font-family:"Bobby Jones", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;font-size :15px;}
  .stack{width:50rem;height: 13rem;}
   .reason{font-size: 18px;width: 109%;position: relative;left:-3px}
   .face{width:140px;height: 170;left: -10%;position: relative;}
   .question-row{gap: 0%;}
    
  
   
/* Wrapper (optional centering) */
.beta {
  text-align: center;
  margin-top: 2rem;
}

/* Main button style */
.beta-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 1rem 2.5rem;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  color: #fff;
  background: #000;
  border-radius: 9999px;
  text-decoration: none;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  box-shadow: 0 0 0 rgba(255, 0, 255, 0);
  z-index: 1;
}

/* Neon glow hover effect */
.beta-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, #ff66cc 0%, #000 80%);
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.8);
  transition: all 0.4s ease;
  border-radius: 9999px;
  z-index: -1;
}

.beta-btn:hover {
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 0 25px rgba(255, 102, 204, 0.6);
}

.beta-btn:hover::before {
  opacity: 1;
  transform: scale(1.1);
  animation: pulseBeta 1.5s infinite;
}

/* Pulsing animation for glow */
@keyframes pulseBeta {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

/* Mobile adjustments */
@media (max-width: 560px) {
  .beta-btn {
    padding: 0.85rem 2rem;
    font-size: 1rem;
  }
}


/* Neon glowing layer */
.neon-glow {
  position: absolute;
  inset: 0;
  background: #565455;
  border-radius: 9999px;
  opacity: 0;
  filter: blur(14px);
  transform: scale(0.9);
  transition: all 0.4s ease;
}
}
@media (max-width:480px){
  /* .split-copy{font-size:.95rem} */
  *{padding: 0.5%;}
  /* .btn-join-beta{padding:0} */
  .behind{font-size:2px;}
}