body {
    margin: 0;
    background: #0d1117;
    color: white;
    font-family: Poppins, sans-serif;
}

header {
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
    position: sticky;
    top: 0;
}

/* About page layout */
.about-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    display: grid;
    grid-template-columns: 360px 1fr;
    gap: 24px;
    align-items: start;
}

.profile-card {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    background: linear-gradient(135deg, #111 0%, #151522 100%);
    border: 1px solid rgba(0,231,255,0.08);
    padding: 18px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

.avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #00e7ff;
    box-shadow: 0 6px 18px rgba(0,231,255,0.08);
}

.details .name {
    margin: 0;
    font-size: 22px;
}
.details .age {
    color: #00e7ff;
    font-weight: 600;
    font-size: 0.95rem;
}
.details .role {
    margin: 6px 0 0 0;
    color: #b2ff59;
    font-weight: 600;
}
.details .location {
    margin: 6px 0 10px 0;
    color: #9ad7ff;
}
.details .bio {
    color: #cbd5e1;
    line-height: 1.5;
}

.meta { margin-top: 12px; }
.meta .btn { margin-right: 10px; }

.interests h3, .skills h3 { margin-top: 0; }

.badges { margin-top: 8px; }
.interest {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    color: #00e7ff;
    margin: 6px 6px 0 0;
    font-weight: 600;
}

.skill-list {
    list-style: none;
    padding: 0;
    margin: 6px 0 0 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.skill-list li {
    padding: 8px 12px;
    border-radius: 8px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.02);
}

/* Responsive */
@media (max-width: 900px) {
    .about-container { grid-template-columns: 1fr; padding: 16px; }
    .profile-card { align-items: center; }
    .avatar { width: 120px; height: 120px; }
}

@media (max-width: 480px) {
    .avatar { width: 100px; height: 100px; }
    .details .name { font-size: 18px; }
}

/* Decorative animated blob behind avatar */
.profile-card { position: relative; overflow: visible; }
.profile-blob {
  position: absolute;
  left: -20px;
  top: -30px;
  width: 220px;
  height: 220px;
  border-radius: 40% 60% 70% 30% / 40% 40% 60% 60%;
  background: linear-gradient(135deg, rgba(0,231,255,0.15), rgba(178,255,89,0.08));
  z-index: 0;
  filter: blur(18px);
  transform-origin: center;
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(6deg); }
  100% { transform: translateY(0) rotate(0deg); }
}

.details { position: relative; z-index: 1; }

.socials { margin-top: 12px; display: flex; gap: 8px; }
.social { color: #00e7ff; padding: 6px 10px; border-radius: 6px; background: rgba(255,255,255,0.02); text-decoration: none; }
.social:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,231,255,0.08); }

.stats { display: flex; gap: 12px; margin-top: 12px; }
.stat { text-align: center; }
.stat-value { font-size: 20px; font-weight: 700; color: #00e7ff; }
.stat-label { font-size: 12px; color: #bcd6e8; }

.skill { margin-top: 12px; }
.skill-name { font-weight: 700; font-size: 14px; color: #cfeeee; margin-bottom: 6px; }
.skill-bar { background: rgba(255,255,255,0.03); height: 12px; border-radius: 999px; overflow: hidden; }
.skill-level { width: 0; height: 100%; background: linear-gradient(90deg,#b2ff59,#2e7d32); transition: width 1200ms cubic-bezier(.2,.9,.3,1); }

.badges .interest { transition: transform 300ms ease, box-shadow 300ms ease; }
.badges .interest.pulse { transform: translateY(-6px); box-shadow: 0 10px 30px rgba(0,231,255,0.08); }

.timeline { margin-top: 16px; background: rgba(255,255,255,0.02); padding: 10px; border-radius: 8px; }
.timeline ul { margin: 8px 0 0 0; padding-left: 18px; }

/* small responsive tweaks */
@media (max-width: 700px) {
  .profile-blob { display: none; }
  .stats { flex-wrap: wrap; gap: 8px; }
}

/* About - enhanced interactive styles */
#aboutBg { position: absolute; inset: 0; width:100%; height:100%; z-index:0; }
.about-container { position: relative; z-index: 2; }

.typewriter { color: #9ad7ff; font-weight:600; margin-top:10px; min-height:22px; }
.typewriter::after { content: '|'; display:inline-block; margin-left:6px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 0%,100%{opacity:1}50%{opacity:0} }

.avatar.draggable { cursor: grab; transition: transform 160ms ease; }
.avatar.dragging { cursor: grabbing; transform: scale(1.02); }

/* Challenge modal */
.challenge-modal { position: fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:200; }
.challenge-modal.visible { display:flex; }
.challenge-inner { background: linear-gradient(135deg,#0f1220,#071017); padding:18px; border-radius:10px; border:1px solid rgba(255,255,255,0.04); width: min(92%,420px); text-align:center; }
#challengeCanvas { background: radial-gradient(circle at 20% 20%, #041017,#001); border-radius:8px; margin:10px 0; display:block; margin-left:auto; margin-right:auto; }
.challenge-controls { display:flex; gap:8px; align-items:center; justify-content:center; }

/* Confetti particles (overlayed via JS) */
.confetti { position:absolute; pointer-events:none; inset:0; z-index:150; }

/* Timeline reveal */
.timeline li { opacity:0; transform: translateY(12px); transition: all 520ms cubic-bezier(.2,.9,.25,1); }
.timeline li.revealed { opacity:1; transform: translateY(0); }

/* small tweaks */
.lead { font-style: italic; color: #cfeeee; }

@media (max-width:700px){ .challenge-inner { width: 96%; } }

/* NEW: About-App distinct styles (standalone unique design) */
.about-app { min-height: calc(100vh - 90px); padding: 40px; max-width: 1200px; margin: 20px auto; position: relative; }
#bgAboutCanvas { position: fixed; inset: 0; width:100%; height:100%; z-index: 0; pointer-events: none; opacity:0.9; }
.app-header { display:flex; justify-content:space-between; align-items:center; padding:18px 40px; background: linear-gradient(90deg, rgba(0,0,0,0.45), rgba(0,0,0,0.2)); position: sticky; top:0; z-index:30; }
.app-header .brand .logo { font-weight:800; color:#b2ff59; font-size:18px; text-decoration:none }
.app-header .tag { color:#9ad7ff; margin-left:8px; font-size:12px }
.app-nav a { color:#cfeeee; margin-left:14px; text-decoration:none }

.hero { display:flex; gap:28px; align-items:flex-start; position:relative; z-index:2; }
.hero-left { width: 360px; }
.profile-3d { width: 360px; height: 360px; perspective: 1200px; margin-bottom: 12px; }
.profile-3d .card-face { width:100%; height:100%; border-radius:14px; display:flex; flex-direction:column; align-items:center; justify-content:center; backface-visibility:hidden; box-shadow: 0 18px 48px rgba(0,0,0,0.6); border:1px solid rgba(255,255,255,0.03); }
.profile-3d .front { background: linear-gradient(135deg,#071018,#09121a); }
.profile-3d .back { transform: rotateY(180deg); background: linear-gradient(135deg,#081118,#031017); color:#cfeeee; padding:18px; }
.profile-3d .card-inner { transform-style: preserve-3d; transition: transform 380ms cubic-bezier(.2,.9,.3,1); }
.big-name { font-size:22px; margin:12px 0 6px 0; }
.big-name .accent { color:#ffd54f; }
.subtitle { color:#9ad7ff; margin:6px 0 0 0 }
.avatar { width:120px; height:120px; border-radius:50%; border:3px solid rgba(178,255,89,0.14); object-fit:cover }
.actions { display:flex; gap:10px; margin-top:10px }
.btn.large { padding:12px 18px; }
.btn.outline { border:1px solid rgba(255,255,255,0.06); background:transparent }
.btn.ghost { background:transparent; color:#9ad7ff }

.hero-right { flex:1; }
.bio-panel { background: linear-gradient(180deg,#081018,#061016); padding:18px; border-radius:12px; border:1px solid rgba(255,255,255,0.03); box-shadow:0 12px 34px rgba(0,0,0,0.6); }
.bio-panel h2 { margin-top:0 }
.bio { color:#cfeeee }

.skills-radar { margin-top: 12px; display:flex; flex-direction:column; align-items:center }
.radar-legend { font-size:12px; color:#9ad7ff; margin-top:8px }

.timeline-panel { margin-top:14px; }
.timeline { list-style:none; padding:0; margin:10px 0 0 0 }
.timeline li { background: rgba(255,255,255,0.01); padding:10px; margin-bottom:8px; border-radius:8px; transition: transform 480ms cubic-bezier(.2,.9,.25,1), box-shadow 480ms; }
.timeline li.celebrate { transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px rgba(178,255,89,0.08); animation: pop 800ms both; }
@keyframes pop { 0%{ transform: translateY(0) scale(0.98) } 50%{ transform: translateY(-6px) scale(1.05) } 100%{ transform: translateY(-8px) scale(1.02) } }

.featured { margin-top:28px }
.projects-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(220px,1fr)); gap:12px }
.project-card { background: linear-gradient(180deg,#071018,#031017); padding:14px; border-radius:10px; border:1px solid rgba(255,255,255,0.02); }
.project-card h4 { margin:0 0 6px 0 }

.app-footer { margin-top:36px; text-align:center; color:#9ad7ff }

/* modal reaction */
.modal { position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:120; background: rgba(0,0,0,0.5) }
.modal.visible { display:flex }
.modal-inner { background: linear-gradient(180deg,#071018,#041016); padding:18px; border-radius:10px; width: min(92%,460px); border:1px solid rgba(255,255,255,0.04); text-align:center }
.reaction-area { margin:12px auto; width:80%; height:120px; border-radius:8px; background:#111; display:flex; align-items:center; justify-content:center; font-weight:700; color:#9ad7ff }
.reaction-area.ready { background: #cfeeee; color:#000 }
.reaction-area.go { background:#6ff4a3; color:#043a22 }
.reaction-results { margin-top:10px; color:#ffd54f }

/* small responsive */
@media (max-width:900px){ .hero{ flex-direction:column } .hero-left{ width:100% } .profile-3d{ width:100%; height:280px } }