:root{
  --bg:#0b0f14;
  --panel:#111827;
  --panel2:#0f172a;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --line:rgba(255,255,255,.08);
  --accent:#7c3aed;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:linear-gradient(180deg,var(--bg),#070a0f);
  color:var(--text);
}
a{color:inherit}
code{
  background:rgba(255,255,255,.06);
  padding:.15rem .35rem;
  border-radius:.35rem;
  border:1px solid var(--line);
}

/* ===== Scroll reveal animation ===== */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 700ms ease,
    transform 700ms ease;
  will-change: opacity, transform;
}
.reveal.in-view{
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ===== HERO ===== */
.hero{
  padding:56px 18px;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(900px 450px at 18% 10%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(800px 450px at 82% 0%, rgba(59,130,246,.18), transparent 60%);
}

.hero-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  gap:18px;
  grid-template-columns: 1.3fr .7fr;
}
@media (max-width:900px){
  .hero-inner{grid-template-columns:1fr;}
}

.container{
  max-width:1200px;
  margin:0 auto;
  padding:26px 18px 44px;
}

/* ===== GRIDS ===== */
.grid-3{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(3, 1fr);
}
.grid-2{
  display:grid;
  gap:18px;
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width:1050px){
  .grid-3{grid-template-columns:1fr;}
  .grid-2{grid-template-columns:1fr;}
}

/* ===== CARDS ===== */
.card{
  background:linear-gradient(180deg,var(--panel),var(--panel2));
  border:1px solid var(--line);
  border-radius:18px;
  padding:20px;
  box-shadow: 0 12px 34px rgba(0,0,0,.28);
}
.card-big{ padding:24px; }
.card-xl{ padding:26px; }

h1{margin:.35rem 0 .25rem; font-size:44px; letter-spacing:-.02em;}
.subtitle{margin:0; color:var(--muted); font-size:15px;}
.lead{margin:14px 0 14px; color:#d1d5db; line-height:1.55; font-size:16px;}

/* ===== AVATAR: circular + glow ring + hover + online dot ===== */
.avatar-wrap{
  position: relative;
  width: 90px;
  height: 90px;
  margin-bottom: 10px;
  display: inline-block;
}

/* outer glow ring */
.avatar-wrap::before{
  content:"";
  position:absolute;
  inset:-6px; /* ring size */
  border-radius:999px;
  background: radial-gradient(circle at 30% 30%,
    rgba(124,58,237,.55),
    rgba(59,130,246,.25),
    transparent 70%);
  filter: blur(6px);
  opacity: .95;
  transition: opacity 260ms ease, transform 260ms ease;
  pointer-events:none;
}

/* the avatar itself */
.avatar{
  width: 90px;
  height: 90px;
  border-radius: 999px;           /* circular */
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  box-shadow:
    0 10px 28px rgba(0,0,0,.35),
    0 0 0 3px rgba(124,58,237,.12); /* subtle ring */
  transform: translateY(0);
  transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  will-change: transform;
}

.avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* hover animation */
.avatar-wrap:hover::before{
  opacity: 1;
  transform: scale(1.04);
}
.avatar-wrap:hover .avatar{
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.22);
  box-shadow:
    0 14px 34px rgba(0,0,0,.42),
    0 0 0 4px rgba(124,58,237,.18);
}

/* online/streaming dot */
.status-dot{
  position:absolute;
  right: 2px;
  bottom: 2px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #22c55e;
  border: 2px solid rgba(15,23,42,.9); /* matches dark background */
  box-shadow: 0 0 0 0 rgba(34,197,94,.55);
  animation: pulse 1.8s ease-out infinite;
}

/* pulsing glow */
@keyframes pulse{
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .status-dot{ animation:none; }
  .avatar-wrap::before,
  .avatar{ transition:none; }
}

/* ===== PILLS / BUTTONS ===== */
.pill-row{display:flex; flex-wrap:wrap; gap:10px; margin:12px 0 20px;}
.pill{
  padding:7px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  color:#e5e7eb;
  font-size:13px;
}

.cta-row{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px;}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 15px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.04);
  text-decoration:none;
  font-weight:700;
}
.btn.primary{
  background:linear-gradient(90deg, rgba(124,58,237,1), rgba(59,130,246,1));
  border-color:rgba(255,255,255,.12);
}

/* ===== LINKS / HIGHLIGHTS ===== */
.links{list-style:none; padding:0; margin:0;}
.links li{padding:10px 0; border-bottom:1px dashed var(--line);}
.links li:last-child{border-bottom:none;}
.links a{text-decoration:none;}
.links a:hover{opacity:.9; text-decoration:underline;}

.highlight-list{display:grid; gap:12px;}
.highlight{
  padding:14px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.highlight-title{font-weight:900; margin-bottom:5px;}
.highlight-desc{color:var(--muted);}

.muted{color:var(--muted);}
.small-note{color:var(--muted); font-size:13px; margin-top:12px;}

/* ===== DIVIDER LINE + GLOW ===== */
.section-divider{
  position: relative;
  height: 54px;
  margin: 34px 0;
}
.section-divider::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  height:1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateY(-50%);
}
.section-divider::after{
  content:"";
  position:absolute;
  left:10%;
  right:10%;
  top:50%;
  height:20px;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, rgba(124,58,237,.22), transparent 70%);
  filter: blur(6px);
  opacity: .9;
}

/* ===== VIDEO ===== */
.video-wrap{
  position:relative;
  width:100%;
  padding-top:56.25%;
  border-radius:16px;
  overflow:hidden;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.video-wrap iframe{ position:absolute; inset:0; width:100%; height:100%; }

.or-divider{
  text-align:center;
  color:var(--muted);
  margin:16px 0;
}

.bullets{margin:10px 0 0; color:#d1d5db; line-height:1.6;}
.footer{margin-top:20px; color:var(--muted); text-align:center;}


/* ===================================================================== */
/* ===== DONATION UI (Added) — matches the same design, no layout changes */
/* ===================================================================== */

.donate-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0 16px;
}

.donate-label{
  display:grid;
  gap:8px;
  font-weight:700;
}

.donate-input-wrap{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.donate-input{
  padding:11px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:var(--text);
  outline:none;
  min-width: 220px;
}

.donate-input:focus{
  border-color: rgba(124,58,237,.6);
}