/* ===== CSS VARIABLES ===== */
:root {
    --bg: #0c0a1a;
    --bg-card: #14112a;
    --bg-glass: rgba(20, 17, 42, 0.7);
    --border: rgba(255,255,255,0.08);
    --accent: #a855f7;
    --accent-light: #c084fc;
    --accent-glow: rgba(168,85,247,0.35);
    --accent-2: #7c3aed;
    --white: #ffffff;
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --font-h: 'Syne', sans-serif;
    --font-b: 'Inter', sans-serif;
    --font-m: 'JetBrains Mono', monospace;
    --nav-h: 72px;
    --radius: 16px;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { background:var(--bg); color:var(--text); font-family:var(--font-b); line-height:1.65; overflow-x:hidden; }
img { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
.container { max-width:1140px; margin:0 auto; padding:0 24px; }

/* ===== UTILITIES ===== */
.accent { color:var(--accent-light); }
.text-gradient { background:linear-gradient(135deg,var(--accent-light),#e879f9,#818cf8); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.section-label { font-family:var(--font-m); font-size:.8rem; text-transform:uppercase; letter-spacing:3px; color:var(--accent-light); margin-bottom:12px; }
.section-title { font-family:var(--font-h); font-size:clamp(2rem,5vw,3.5rem); font-weight:800; line-height:1.1; margin-bottom:1.25rem; color:var(--white); }

/* ===== BUTTONS ===== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:10px; font-family:var(--font-h); font-weight:700; font-size:.95rem; border:none; cursor:pointer; transition:all .3s ease; }
.btn-icon { font-size:18px !important; }
.btn-primary { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; box-shadow:0 4px 20px var(--accent-glow); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
.btn-ghost { background:transparent; color:var(--white); border:1px solid var(--border); }
.btn-ghost:hover { border-color:rgba(255,255,255,.25); background:rgba(255,255,255,.04); }
.btn-outline { background:transparent; color:var(--accent-light); border:1px solid var(--accent-glow); width:100%; justify-content:center; }
.btn-outline:hover { background:rgba(168,85,247,.1); box-shadow:0 0 20px var(--accent-glow); }
.btn-disabled { opacity:.4; cursor:not-allowed; color:var(--text-muted); border-color:var(--border); }

/* ===== NAVBAR ===== */
.navbar { position:fixed; top:0; width:100%; height:var(--nav-h); z-index:100; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); background:rgba(12,10,26,.6); border-bottom:1px solid var(--border); transition:background .3s; }
.nav-container { max-width:1140px; margin:0 auto; padding:0 24px; height:100%; display:flex; justify-content:space-between; align-items:center; }
.brand { font-family:var(--font-h); font-size:1.4rem; font-weight:800; color:var(--white); }
.nav-links { display:flex; gap:2rem; align-items:center; }
.nav-links a { color:var(--text-muted); font-size:.9rem; font-weight:500; transition:color .2s; }
.nav-links a:hover { color:var(--white); }
.nav-cta { color:var(--accent-light)!important; padding:8px 18px; border:1px solid var(--accent-glow); border-radius:8px; }
.mobile-menu-btn { display:none; background:none; border:none; color:var(--white); cursor:pointer; }
.mobile-menu-btn .material-symbols-outlined { font-size:28px; }

/* Mobile Panel */
.mobile-panel { position:fixed; top:0; right:-100%; width:75%; max-width:320px; height:100vh; background:var(--bg-card); z-index:200; padding:2rem; display:flex; flex-direction:column; gap:1.5rem; transition:right .4s cubic-bezier(.4,0,.2,1); border-left:1px solid var(--border); }
.mobile-panel.open { right:0; }
.mobile-panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.mobile-close-btn { background:none; border:none; color:var(--white); cursor:pointer; }
.mobile-link { font-family:var(--font-h); font-size:1.5rem; font-weight:700; color:var(--white); transition:color .2s; }
.mobile-link:hover { color:var(--accent-light); }
.mobile-panel-footer { margin-top:auto; color:var(--text-muted); font-size:.85rem; }
.mobile-panel-footer a { color:var(--accent-light); }
.mobile-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:150; opacity:0; pointer-events:none; transition:opacity .3s; }
.mobile-overlay.show { opacity:1; pointer-events:auto; }

/* ===== BRAND BANNER ===== */
.brand-banner { margin-top:var(--nav-h); overflow:hidden; display:flex; justify-content:center; align-items:center; background:#1444c8; padding:24px 0; }
.brand-banner-img { height:60px; width:auto; display:block; }

/* ===== HERO ===== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; padding-top:0; overflow:hidden; }
.hero-bg { position:absolute; inset:0; z-index:0; background:radial-gradient(ellipse at 20% 50%,rgba(168,85,247,.15) 0%,transparent 60%),radial-gradient(ellipse at 80% 20%,rgba(124,58,237,.1) 0%,transparent 50%); animation:pulse-bg 8s ease-in-out infinite alternate; }
@keyframes pulse-bg { 0%{opacity:.7;transform:scale(1)} 100%{opacity:1;transform:scale(1.05)} }
.hero-grid-overlay { position:absolute; inset:0; z-index:0; background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px); background-size:60px 60px; }
.hero-content { position:relative; z-index:1; max-width:720px; }
.hero-badge { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-family:var(--font-m); font-size:.8rem; background:rgba(168,85,247,.1); border:1px solid var(--accent-glow); color:var(--accent-light); margin-bottom:1.5rem; }
.hero-badge .material-symbols-outlined { font-size:16px; }
.hero-title { font-family:var(--font-h); font-size:clamp(2.8rem,7vw,5rem); font-weight:800; line-height:1.05; letter-spacing:-1.5px; margin-bottom:1.5rem; color:var(--white); }
.hero-subtitle { font-size:clamp(1rem,2vw,1.2rem); color:var(--text-muted); max-width:560px; margin-bottom:2.5rem; min-height:52px; }
.hero-subtitle::after { content:'|'; animation:blink .8s step-end infinite; color:var(--accent-light); }
@keyframes blink { 50%{opacity:0} }
.hero-actions { display:flex; gap:1rem; flex-wrap:wrap; }

.scroll-cue { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-muted); font-size:.75rem; font-family:var(--font-m); }
.scroll-mouse { width:22px; height:34px; border:2px solid var(--text-muted); border-radius:11px; position:relative; }
.scroll-mouse::before { content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%); width:3px; height:6px; background:var(--accent-light); border-radius:3px; animation:scroll-dot 2s infinite; }
@keyframes scroll-dot { 0%{top:6px;opacity:1} 100%{top:20px;opacity:0} }

/* Hero Mascot — Dangling Holder */
.hero-mascot { position:absolute; right:8%; top:0; z-index:1; width:200px; transform-origin:top center; animation:swing 4s ease-in-out infinite; cursor:grab; }
.hero-mascot:active { cursor:grabbing; }
.hero-mascot::before { content:''; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:60px; background:linear-gradient(to bottom, rgba(168,85,247,0.6), rgba(168,85,247,0.15)); }
.hero-mascot-ring { margin-top:55px; width:180px; height:180px; margin-left:auto; margin-right:auto; border-radius:50%; border:2px solid rgba(168,85,247,0.4); background:radial-gradient(circle, rgba(20,17,42,0.9), rgba(12,10,26,0.95)); padding:20px; display:flex; align-items:center; justify-content:center; box-shadow:0 0 40px rgba(168,85,247,0.2), inset 0 0 30px rgba(168,85,247,0.05); position:relative; transition:transform .3s ease, box-shadow .3s ease; }
.hero-mascot-ring:hover { box-shadow:0 0 60px rgba(168,85,247,0.4), inset 0 0 40px rgba(168,85,247,0.1); transform:scale(1.05); }
.hero-mascot-ring::before { content:''; position:absolute; inset:-6px; border-radius:50%; border:1px dashed rgba(168,85,247,0.2); animation:spin-ring 20s linear infinite; }
.hero-mascot-ring img { width:100%; height:100%; object-fit:contain; border-radius:50%; filter:drop-shadow(0 0 15px rgba(168,85,247,0.3)); }
@keyframes swing { 0%,100%{transform:rotate(-3deg)} 50%{transform:rotate(3deg)} }
@keyframes spin-ring { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }

/* ===== ABOUT ===== */
.about { padding:120px 0; }
.about-grid { display:grid; grid-template-columns:1fr 1.3fr; gap:4rem; align-items:center; }
.photo-frame { aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden; background:var(--bg-card); border:1px solid var(--border); position:relative; }
.photo-frame img { width:100%; height:100%; object-fit:cover; }
.photo-frame.no-img img { display:none; }
.photo-frame.no-img .photo-placeholder, .photo-frame .photo-placeholder { display:none; }
.photo-frame.no-img .photo-placeholder { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; gap:.75rem; color:var(--text-muted); }
.photo-frame.no-img .photo-placeholder .material-symbols-outlined { font-size:48px; }

.about-photo-col { position:relative; }
.years-badge { position:absolute; bottom:-16px; right:-16px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:16px 20px; display:flex; flex-direction:column; align-items:center; backdrop-filter:blur(10px); }
.years-number { font-family:var(--font-h); font-size:2.5rem; font-weight:800; color:var(--accent-light); line-height:1; }
.years-plus { font-family:var(--font-h); font-size:1.5rem; font-weight:700; color:var(--accent-light); }
.years-label { font-size:.75rem; color:var(--text-muted); font-family:var(--font-m); }

.bio-text { color:var(--text-muted); font-size:1.05rem; margin-bottom:1.25rem; }
.stats-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin:2rem 0; padding-top:2rem; border-top:1px solid var(--border); }
.stat-num { font-family:var(--font-h); font-size:2rem; font-weight:800; color:var(--white); display:block; }
.stat-suffix { font-family:var(--font-h); font-size:1.2rem; font-weight:700; color:var(--accent-light); }
.stat-desc { font-size:.8rem; color:var(--text-muted); }
.credential-row { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.5rem; }
.cred-tag { display:inline-flex; align-items:center; gap:6px; padding:6px 14px; border-radius:20px; font-size:.8rem; font-family:var(--font-m); background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.15); color:var(--text-muted); }
.cred-tag .material-symbols-outlined { font-size:16px; color:var(--accent-light); }

/* ===== PROJECTS ===== */
.projects { padding:120px 0; }
.section-header { margin-bottom:4rem; }
.project-list { display:flex; flex-direction:column; gap:5rem; }
.project-card { display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center; }
.project-card.reverse { direction:rtl; }
.project-card.reverse .project-info { direction:ltr; }
.project-meta { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.project-year { font-family:var(--font-m); font-size:.85rem; color:var(--text-muted); }
.status-badge { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:20px; font-size:.75rem; font-family:var(--font-m); font-weight:500; }
.status-dot { width:6px; height:6px; border-radius:50%; }
.status-badge.live { background:rgba(34,197,94,.1); color:#4ade80; }
.status-badge.live .status-dot { background:#4ade80; }
.status-badge.beta { background:rgba(250,204,21,.1); color:#facc15; }
.status-badge.beta .status-dot { background:#facc15; }
.status-badge.wip { background:rgba(148,163,184,.1); color:#94a3b8; }
.status-badge.wip .status-dot { background:#94a3b8; }
.project-name { display:flex; align-items:center; gap:12px; font-family:var(--font-h); font-size:2.2rem; font-weight:800; color:var(--white); margin-bottom:.75rem; }
.project-icon { width:40px; height:40px; border-radius:10px; object-fit:cover; box-shadow:0 4px 10px rgba(0,0,0,0.5); }
.project-desc { color:var(--text-muted); font-size:1rem; margin-bottom:1.5rem; line-height:1.7; }
.pills { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.pill { padding:4px 12px; background:var(--bg); border:1px solid var(--border); border-radius:20px; font-size:.75rem; font-family:var(--font-m); color:var(--text-muted); }

/* Phone Mockup */
.project-phone { display:flex; justify-content:center; perspective:800px; }
.phone-frame { width:260px; height:540px; background:#111; border-radius:36px; border:6px solid #2a2a40; position:relative; overflow:hidden; box-shadow:0 20px 60px rgba(0,0,0,.4),0 0 40px var(--accent-glow); transition:transform .4s cubic-bezier(.25,1,.5,1); }
.phone-frame:hover { transform:rotateY(5deg) rotateX(-3deg) scale(1.03); }
.phone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:100px; height:22px; background:#2a2a40; border-bottom-left-radius:14px; border-bottom-right-radius:14px; z-index:5; }
.phone-screen { width:100%; height:100%; object-fit:cover; cursor:pointer; }

.blurred-phone { position:relative; }
.blurred-phone .phone-frame { filter:blur(6px) brightness(.5); }
.coming-soon-overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:rgba(255,255,255,.85); font-family:var(--font-h); font-weight:800; font-size:1.2rem; z-index:2; pointer-events:none; }
.coming-soon-overlay .material-symbols-outlined { font-size:36px; }

/* ===== MARQUEE ===== */
.skills { padding:60px 0; overflow:hidden; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.marquee-wrapper { overflow:hidden; white-space:nowrap; }
.marquee-track { display:inline-flex; align-items:center; gap:2rem; animation:marquee 25s linear infinite; }
.marquee-track span { font-family:var(--font-h); font-size:1.8rem; font-weight:700; color:var(--text-muted); flex-shrink:0; }
.marquee-dot { width:8px; height:8px; border-radius:50%; background:var(--accent-light); flex-shrink:0; display:inline-block; }
@keyframes marquee { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }

/* ===== TIMELINE ===== */
.timeline-section { padding:120px 0; }
.timeline { position:relative; padding-left:2.5rem; max-width:700px; }
.timeline::before { content:''; position:absolute; left:0; top:0; bottom:0; width:2px; background:linear-gradient(to bottom,var(--accent-light),transparent); }
.tl-item { position:relative; margin-bottom:2.5rem; }
.tl-dot { position:absolute; left:-2.5rem; top:20px; width:14px; height:14px; background:var(--bg); border:2px solid var(--accent-light); border-radius:50%; transform:translateX(-6px); box-shadow:0 0 12px var(--accent-glow); }
.tl-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:1.25rem 1.5rem; }
.tl-date { font-family:var(--font-m); font-size:.8rem; color:var(--accent-light); display:block; margin-bottom:.5rem; }
.tl-card h4 { font-family:var(--font-h); font-size:1.15rem; color:var(--white); margin-bottom:.5rem; }
.tl-card p { color:var(--text-muted); font-size:.9rem; }

/* ===== TEAM ===== */
.team-section { padding:120px 0; }
.team-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:2rem; }
.team-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:2.5rem; text-align:center; transition:border-color .3s, transform .3s; }
.team-card:hover { border-color:rgba(168,85,247,.3); transform:translateY(-4px); }
.team-avatar { width:90px; height:90px; border-radius:50%; background:rgba(168,85,247,.1); border:2px solid rgba(168,85,247,.25); display:flex; align-items:center; justify-content:center; margin:0 auto 1.25rem; }
.team-avatar .material-symbols-outlined { font-size:40px; color:var(--accent-light); opacity:.6; }
.team-name { font-family:var(--font-h); font-size:1.3rem; font-weight:700; color:var(--white); margin-bottom:.35rem; }
.team-role { font-family:var(--font-m); font-size:.8rem; color:var(--accent-light); margin-bottom:1rem; }
.team-bio { color:var(--text-muted); font-size:.9rem; line-height:1.7; margin-bottom:1.25rem; }
.team-contact { display:inline-flex; align-items:center; gap:6px; color:var(--text-muted); font-size:.85rem; transition:color .2s; }
.team-contact:hover { color:var(--accent-light); }
.team-contact .material-symbols-outlined { font-size:16px; color:var(--accent-light); }

/* ===== CONTACT ===== */
.contact { padding:120px 0; }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; }
.contact-subtitle { color:var(--text-muted); font-size:1.05rem; margin-bottom:2rem; }
.contact-details { display:flex; flex-direction:column; gap:.75rem; margin-bottom:2rem; }
.contact-link { display:inline-flex; align-items:center; gap:8px; color:var(--text-muted); font-size:.9rem; transition:color .2s; }
.contact-link:hover { color:var(--accent-light); }
.contact-link .material-symbols-outlined { font-size:18px; color:var(--accent-light); }
.social-row { display:flex; gap:1rem; }
.social-icon { width:44px; height:44px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--white); transition:all .3s; }
.social-icon:hover { color:var(--accent-light); border-color:var(--accent-light); transform:translateY(-3px); box-shadow:0 6px 20px var(--accent-glow); }
.whatsapp-icon:hover { color:#25d366; border-color:#25d366; box-shadow:0 6px 20px rgba(37,211,102,.35); }

.contact-right { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:2rem; }
.form-field { margin-bottom:1.25rem; }
.form-field label { display:block; margin-bottom:.4rem; font-family:var(--font-m); font-size:.8rem; color:var(--text-muted); }
.form-field input, .form-field textarea { width:100%; padding:12px 14px; background:rgba(0,0,0,.25); border:1px solid var(--border); border-radius:8px; color:var(--white); font-family:var(--font-b); font-size:.95rem; outline:none; transition:border-color .2s; }
.form-field input:focus, .form-field textarea:focus { border-color:var(--accent-light); }
.btn-submit { width:100%; justify-content:center; }

/* ===== FOOTER ===== */
.footer { border-top:1px solid var(--border); padding:1.5rem 0; }
.footer-inner { display:flex; justify-content:space-between; align-items:center; }
.footer p { color:var(--text-muted); font-size:.85rem; font-family:var(--font-m); }
.to-top { width:36px; height:36px; border-radius:50%; background:var(--bg-card); border:1px solid var(--border); color:var(--white); cursor:pointer; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:all .3s; }
.to-top.show { opacity:1; visibility:visible; }
.to-top:hover { border-color:var(--accent-light); color:var(--accent-light); }

/* ===== LIGHTBOX ===== */
.lightbox { position:fixed; inset:0; background:rgba(12,10,26,.95); z-index:500; display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition:opacity .3s; }
.lightbox.open { opacity:1; visibility:visible; }
.lightbox-close { position:absolute; top:24px; right:24px; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer; z-index:10; }
.lightbox-img { max-width:90vw; max-height:90vh; border-radius:12px; transform:scale(.92); transition:transform .3s; }
.lightbox.open .lightbox-img { transform:scale(1); }

/* ===== ANIMATIONS ===== */
.anim-fade-up { opacity:0; transform:translateY(24px); animation:fadeUp .7s forwards cubic-bezier(.25,1,.5,1); }
.anim-delay-1 { animation-delay:.15s; }
.anim-delay-2 { animation-delay:.3s; }
.anim-delay-3 { animation-delay:.45s; }
@keyframes fadeUp { to { opacity:1; transform:translateY(0); } }

.reveal-up, .reveal-left, .reveal-right { opacity:0; transition:all .7s cubic-bezier(.25,1,.5,1); }
.reveal-up { transform:translateY(40px); }
.reveal-left { transform:translateX(-40px); }
.reveal-right { transform:translateX(40px); }
.reveal-up.visible, .reveal-left.visible, .reveal-right.visible { opacity:1; transform:translate(0); }

/* ===== RESPONSIVE ===== */
@media(max-width:992px) {
    .about-grid, .project-card, .contact-grid, .team-grid { grid-template-columns:1fr; }
    .project-card.reverse { direction:ltr; }
    .project-phone { order:-1; }
}
@media(max-width:768px) {
    .about, .projects, .timeline-section, .contact, .team-section { padding:80px 0; }
    .nav-links { display:none; }
    .mobile-menu-btn { display:block; }
    .hero-title { font-size:2.4rem; }
    .stats-strip { grid-template-columns:repeat(3,1fr); text-align:center; }
    .phone-frame { width:220px; height:460px; }
    .hero-mascot { display:none; }
}