/* Base */
html { scroll-behavior: smooth; }
body {
    font-family: 'Poppins', sans-serif;
    background: #ffffff;
    color: #111827;
    margin: 0;
}

/* Nav */
.glass-nav {
    background: rgba(255,255,255,0.9);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: 0.6rem 1.25rem;
}
.nav-link.active { color: #8b5cf6; }

/* Hero */
.hero-section { min-height: 70vh; padding: 2rem 1rem; display: flex; align-items: center; justify-content: center; position: relative; }
#home::before {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: 48vw;
    height: 48vw;
    max-width: 620px;
    max-height: 620px;
    background: radial-gradient(ellipse, rgba(139,92,246,0.08) 0%, rgba(139,92,246,0) 65%);
    z-index: 0;
    pointer-events: none;
}
.hero-inner { position: relative; z-index: 2; max-width: 980px; width: 100%; padding: 1.5rem 1rem; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }

/* Titles */
.subtitle { letter-spacing: 0.3px; color: #6b7280; }
.hero-title {
    line-height: 0.95;
    margin: 0.25rem 0;
    animation: pop-in 700ms cubic-bezier(.2,.9,.2,1) both, float-slow 6s ease-in-out infinite;
    will-change: transform, opacity;
}
.hero-last {
    background: linear-gradient(90deg,#7c3aed,#06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Typed highlight */
.typed-highlight {
    background: linear-gradient(90deg,#7c3aed,#6d28d9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 600;
}

/* CTA */
.cta-button-animated { animation: pulse-shadow 3s infinite; }
.resume-btn { box-shadow: 0 8px 22px rgba(124,58,237,0.18); border: none; }

/* Cards & grid */
.card-hover-effect { transition: transform .25s ease, box-shadow .25s ease; padding: 1rem; border-radius: .6rem; }
.card-hover-effect:hover { transform: translateY(-6px); box-shadow: 0 12px 24px rgba(0,0,0,0.06); }
.bg-gray-800 .text-white { color: #ffffff !important; }

/* Scroll animations */
.scroll-animate, .scroll-fade-left, .scroll-fade-right { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
.scroll-animate { transform: translateY(30px); }
.scroll-animate.visible { opacity: 1; transform: translateY(0); }
.scroll-fade-left { transform: translateX(-30px); }
.scroll-fade-left.visible { opacity: 1; transform: translateX(0); }
.scroll-fade-right { transform: translateX(30px); }
.scroll-fade-right.visible { opacity: 1; transform: translateX(0); }

/* Timeline */
.timeline-line { position: absolute; left: 1.25rem; top: 0; bottom: 0; width: 2px; background: #e5e7eb; }
.timeline-dot { position: absolute; left: -1rem; top: .3rem; width: 14px; height: 14px; background: #8b5cf6; border-radius: 50%; border: 3px solid #fff; }

/* Animations */
@keyframes pulse-shadow {
    0%,100% { box-shadow: 0 0 15px rgba(124,58,237,0.18); }
    50% { box-shadow: 0 0 28px rgba(124,58,237,0.28); }
}
@keyframes pop-in {
    0% { opacity: 0; transform: translateY(16px) scale(.98); filter: blur(6px); }
    60% { opacity: 1; transform: translateY(-6px) scale(1.02); filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes float-slow {
    0% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
    100% { transform: translateY(0); }
}

/* Cursor for typed text */
#typed-text::after {
    content: "";
    display: inline-block;
    width: 2px;
    height: 1.05em;
    margin-left: 6px;
    background: linear-gradient(180deg,#6d28d9,#7c3aed);
    animation: blink-caret 1s steps(1) infinite;
    vertical-align: text-bottom;
}
@keyframes blink-caret { 50% { opacity: 0; } }

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .hero-title, .cta-button-animated, .scroll-animate, .scroll-fade-left, .scroll-fade-right { animation: none !important; transition: none !important; }
    #typed-text::after { animation: none !important; }
}

/* Global spacing */
.section { padding: 3rem 1.25rem; }
footer { padding: 0.75rem 0; }

/* Responsive tweaks */
@media (max-width: 640px) {
    .hero-title { font-size: 3rem; animation: none; }
    .hero-inner { padding: 1rem; }
    .grid { gap: 0.6rem; }
}

/* Contact - centered highlighted send + social pills */
.send-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(90deg,#7c3aed,#06b6d4);
    color: #fff;
    padding: 12px 28px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 16px;
    border: none;
    box-shadow: 0 12px 30px rgba(99,102,241,0.18);
    transition: transform .16s ease, box-shadow .16s ease;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.send-btn:hover { transform: translateY(-4px); box-shadow: 0 22px 50px rgba(99,102,241,0.22); }

/* Centered social pills in contact */
.contact-socials {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 18px;
    
}
.social-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 999px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 8px 26px rgba(17,24,39,0.08);
    transition: transform .14s ease, box-shadow .14s ease;
    font-size: 15px;
}
.social-pill svg { flex-shrink: 0; width:18px; height:18px; }

/* brand colors for pills */
.social-pill.linkedin { background: linear-gradient(90deg,#0A66C2,#175C9C); }
.social-pill.email    { background: linear-gradient(90deg,#EA4335,#C33A2C); }
.social-pill.github   { background: linear-gradient(90deg,#111827,#374151); }

.social-pill:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(17,24,39,0.14); }

/* Make sure social-bar (if present) doesn't conflict visually: hide on desktop if needed */
.social-bar { display: none; }

/* On small screens keep pills compact */
@media (max-width: 640px) {
    .send-btn { width: 100%; justify-content: center; padding: 12px; }
    .contact-socials { gap: 8px; }
    .social-pill { padding: 8px 10px; font-size: 13px; border-radius: 12px; }
}