@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');:root {--primary: #6366f1;--primary-hover: #4f46e5;--secondary: #ec4899;--accent: #8b5cf6;--dark-bg: #0f172a;--dark-card: #1e293b;--text-main: #f8fafc;--text-muted: #94a3b8;--border: #334155;--gradient-main: linear-gradient(135deg, #6366f1 0%, #a855f7 50%, #ec4899 100%);--gradient-glow: radial-gradient(circle at center, rgba(99, 102, 241, 0.15) 0%, rgba(15, 23, 42, 0) 70%);--container: 1200px;--header-height: 80px;--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);}* {margin: 0;padding: 0;box-sizing: border-box;}html {scroll-behavior: smooth;}body {font-family: 'Plus Jakarta Sans', sans-serif;background-color: var(--dark-bg);background-image: url('../images/bg-coder.jpg');background-size: cover;background-position: center;background-attachment: fixed;color: var(--text-main);line-height: 1.6;overflow-x: hidden;}h1,h2,h3,h4,h5,h6 {font-family: 'Outfit', sans-serif;font-weight: 700;line-height: 1.2;}a {text-decoration: none;color: inherit;transition: var(--transition);}ul {list-style: none;}img {max-width: 100%;display: block;}.container {max-width: var(--container);margin: 0 auto;padding: 0 2rem;}.section {padding: 6rem 0;}.text-gradient {background: var(--gradient-main);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;}.btn {display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.875rem 2rem;border-radius: 50px;font-weight: 600;font-size: 1rem;cursor: pointer;transition: var(--transition);border: none;}.btn-primary {background: var(--gradient-main);color: white;box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);}.btn-primary:hover {transform: translateY(-2px);box-shadow: 0 8px 30px rgba(99, 102, 241, 0.5);}.btn-outline {background: transparent;border: 2px solid var(--border);color: var(--text-main);}.btn-outline:hover {border-color: var(--primary);background: rgba(99, 102, 241, 0.1);}@keyframes fadeInUp {from {opacity: 0;transform: translateY(30px);}to {opacity: 1;transform: translateY(0);}}@keyframes slideInLeft {from {opacity: 0;transform: translateX(-30px);}to {opacity: 1;transform: translateX(0);}}.reveal {opacity: 0;transform: translateY(30px);transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);}.reveal.active {opacity: 1;transform: translateY(0);}.reveal.active .skill-card,.reveal.active .project-card,.reveal.active .contact-card {animation: fadeInUp 0.6s ease-out forwards;opacity: 0;}.reveal.active .timeline-item {animation: slideInLeft 0.6s ease-out forwards;opacity: 0;}.reveal.active .skill-card:nth-child(1),.reveal.active .project-card:nth-child(1),.reveal.active .contact-card:nth-child(1),.reveal.active .timeline-item:nth-child(1) {animation-delay: 0.1s;}.reveal.active .skill-card:nth-child(2),.reveal.active .project-card:nth-child(2),.reveal.active .contact-card:nth-child(2),.reveal.active .timeline-item:nth-child(2) {animation-delay: 0.2s;}.reveal.active .skill-card:nth-child(3),.reveal.active .project-card:nth-child(3),.reveal.active .timeline-item:nth-child(3) {animation-delay: 0.3s;}.reveal.active .skill-card:nth-child(4),.reveal.active .project-card:nth-child(4),.reveal.active .timeline-item:nth-child(4) {animation-delay: 0.4s;}.reveal.active .skill-card:nth-child(5) {animation-delay: 0.5s;}.reveal.active .skill-card:nth-child(6) {animation-delay: 0.6s;}header {position: fixed;top: 0;left: 0;width: 100%;height: var(--header-height);background: rgba(15, 23, 42, 0.8);backdrop-filter: blur(12px);z-index: 1000;border-bottom: 1px solid rgba(255, 255, 255, 0.05);}header .container {height: 100%;display: flex;justify-content: space-between;align-items: center;}.logo {font-family: 'Outfit', sans-serif;font-size: 1.5rem;font-weight: 800;letter-spacing: -0.5px;}.nav-links {display: flex;gap: 2.5rem;}.nav-links a {font-weight: 500;color: var(--text-muted);}.nav-links a.active {color: var(--primary);}.nav-links a::after,.nav-links a.active {color: var(--text-main);}.mobile-toggle {display: none;font-size: 1.5rem;background: none;color: var(--text-main);border: none;cursor: pointer;}.hero {min-height: 100vh;display: flex;align-items: center;position: relative;padding-top: var(--header-height);overflow: hidden;}.hero::before {content: '';position: absolute;top: -20%;right: -10%;width: 600px;height: 600px;background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, rgba(99, 102, 241, 0) 70%);filter: blur(60px);z-index: -1;pointer-events: none;}.hero::after {content: '';position: absolute;bottom: -10%;left: -10%;width: 500px;height: 500px;background: radial-gradient(circle, rgba(236, 72, 153, 0.1) 0%, rgba(236, 72, 153, 0) 70%);filter: blur(60px);z-index: -1;pointer-events: none;}.hero-content {max-width: 600px;}.hero-badge {display: inline-block;padding: 0.5rem 1rem;background: rgba(99, 102, 241, 0.1);border: 1px solid rgba(99, 102, 241, 0.2);border-radius: 20px;color: var(--text-main);font-weight: 600;font-size: 0.875rem;margin-bottom: 1.5rem;}.hero h1 {font-size: 4.5rem;line-height: 1.1;margin-bottom: 0.5rem;}.mono-type {font-family: 'Courier New', Courier, monospace;font-size: 2.5rem;color: var(--text-muted);margin-bottom: 1.5rem;min-height: 3rem;font-weight: 500;}.cursor {display: inline-block;width: 3px;height: 1em;background-color: var(--primary);animation: blink 1s infinite;vertical-align: middle;}@keyframes blink {0%,100% {opacity: 1;}50% {opacity: 0;}}.hero p {font-size: 1.25rem;color: var(--text-muted);margin-bottom: 2.5rem;}.hero-actions {display: flex;gap: 1rem;}.section-header {margin-bottom: 4rem;text-align: center;position: relative;}.section-header::before {content: '';position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 300px;height: 100px;background: rgba(99, 102, 241, 0.15);filter: blur(50px);z-index: -1;border-radius: 50%;}.section-header h2 {font-size: 3rem;margin-bottom: 1rem;background: linear-gradient(to right, #fff, #94a3b8);background-clip: text;-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.section-header p {color: var(--text-muted);max-width: 600px;margin: 0 auto;font-size: 1.1rem;}.skills-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: 2rem;}.skill-card {background: rgba(30, 41, 59, 0.4);backdrop-filter: blur(10px);padding: 2.5rem;border-radius: 20px;border: 1px solid rgba(255, 255, 255, 0.05);transition: var(--transition);}.skill-card:hover {transform: translateY(-5px);border-color: rgba(99, 102, 241, 0.5);box-shadow: 0 10px 30px -10px rgba(99, 102, 241, 0.2);}.skill-icon {font-size: 2.5rem;margin-bottom: 1.5rem;color: var(--primary);background: rgba(99, 102, 241, 0.1);width: 64px;height: 64px;display: flex;align-items: center;justify-content: center;border-radius: 16px;}.skill-card h3 {margin-bottom: 1.5rem;font-size: 1.5rem;}.skill-tags {display: flex;flex-wrap: wrap;gap: 0.75rem;}.skill-tag {font-size: 0.85rem;padding: 0.4rem 1rem;background: rgba(255, 255, 255, 0.05);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 100px;color: var(--text-light);transition: var(--transition);}.skill-card:hover .skill-tag {background: rgba(99, 102, 241, 0.1);border-color: rgba(99, 102, 241, 0.3);}.projects-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));gap: 2.5rem;}.project-card {background: var(--dark-card);border-radius: 24px;overflow: hidden;border: 1px solid rgba(255, 255, 255, 0.05);transition: var(--transition);}.project-card:hover {transform: translateY(-10px);box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.5);border-color: rgba(255, 255, 255, 0.1);}.project-image {height: 240px;background: #1e293b;position: relative;overflow: hidden;display: flex;align-items: center;justify-content: center;}.project-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(15, 23, 42, 0.9);display: flex;align-items: center;justify-content: center;opacity: 0;transition: var(--transition);backdrop-filter: blur(4px);}.project-card:hover .project-overlay {opacity: 1;}.project-content {padding: 2rem;}.project-tech {display: flex;flex-wrap: wrap;gap: 0.5rem;margin-bottom: 1rem;}.tech-tag {font-size: 0.75rem;padding: 0.25rem 0.75rem;background: rgba(99, 102, 241, 0.1);color: var(--primary);border-radius: 100px;font-weight: 600;}.project-content h3 {font-size: 1.5rem;margin-bottom: 0.5rem;}.project-content p {color: var(--text-muted);font-size: 0.95rem;margin-bottom: 1.5rem;line-height: 1.6;}.timeline {max-width: 800px;margin: 0 auto;position: relative;}.timeline::before {content: '';position: absolute;left: 0;top: 0;height: 100%;width: 2px;background: linear-gradient(to bottom, var(--primary), transparent);}.timeline-item {padding-left: 3.5rem;position: relative;padding-bottom: 3.5rem;}.timeline-item::before {content: '';position: absolute;left: -5px;top: 0;width: 12px;height: 12px;border-radius: 50%;background: var(--bg-dark);border: 2px solid var(--primary);box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);}.timeline-content {background: rgba(15, 23, 42, 0.85);padding: 2rem;border-radius: 16px;border: 1px solid rgba(255, 255, 255, 0.1);transition: var(--transition);backdrop-filter: blur(12px);box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);}.timeline-item:hover .timeline-content {background: rgba(15, 23, 42, 0.95);border-color: var(--primary);transform: translateX(5px);box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);}.timeline-date {font-family: 'Outfit', sans-serif;color: var(--primary);font-weight: 600;margin-bottom: 0.5rem;display: inline-block;padding: 0.25rem 0.75rem;background: rgba(99, 102, 241, 0.1);border-radius: 100px;font-size: 0.85rem;}.timeline-content h3 {font-size: 1.5rem;margin: 0.5rem 0 0.25rem;}.timeline-content h4 {font-size: 1.1rem;color: var(--text-light);font-weight: 500;margin-bottom: 1.25rem;}.timeline-content p {color: var(--text-muted);font-size: 1rem;line-height: 1.7;}.contact-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 4rem;max-width: 900px;margin: 0 auto;}.contact-card {background: var(--dark-card);padding: 2rem;border-radius: 16px;text-align: center;border: 1px solid rgba(255, 255, 255, 0.05);}.contact-icon {width: 60px;height: 60px;background: rgba(99, 102, 241, 0.1);border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 1.5rem;font-size: 1.5rem;color: var(--primary);}.contact-card h3 {margin-bottom: 0.5rem;}.contact-card a {color: var(--text-muted);}.contact-card a:hover {color: var(--primary);}footer {padding: 4rem 0 2rem;background: #0b1120;text-align: center;border-top: 1px solid rgba(255, 255, 255, 0.05);}.social-links {display: flex;justify-content: center;gap: 1.5rem;margin-bottom: 2rem;}.social-icon {width: 40px;height: 40px;border-radius: 50%;background: rgba(255, 255, 255, 0.05);display: flex;align-items: center;justify-content: center;transition: var(--transition);}.social-icon:hover {background: var(--primary);transform: translateY(-3px);}.footer-copy {color: var(--text-muted);font-size: 0.9rem;}.tech-marquee {background: rgba(15, 23, 42, 0.95);padding: 1.5rem 0;overflow: hidden;border-bottom: 1px solid rgba(255, 255, 255, 0.05);white-space: nowrap;position: relative;}.tech-marquee::before,.tech-marquee::after {content: "";position: absolute;top: 0;width: 100px;height: 100%;z-index: 2;}.tech-marquee::before {left: 0;background: linear-gradient(to right, var(--dark-bg), transparent);}.tech-marquee::after {right: 0;background: linear-gradient(to left, var(--dark-bg), transparent);}.marquee-content {display: inline-flex;gap: 4rem;animation: scroll 30s linear infinite;}.marquee-content span {font-size: 1.25rem;font-weight: 600;color: var(--text-muted);display: flex;align-items: center;gap: 0.5rem;transition: var(--transition);}.marquee-content span:hover {color: var(--text-main);transform: scale(1.1);}.marquee-content i {font-size: 1.5rem;}@keyframes scroll {from {transform: translateX(0);}to {transform: translateX(-50%);}}.testimonials-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;margin-top: 3rem;}.testimonial-card {background: var(--dark-card);padding: 2.5rem;border-radius: 20px;border: 1px solid rgba(255, 255, 255, 0.05);position: relative;transition: var(--transition);}.testimonial-card:hover {transform: translateY(-5px);border-color: rgba(99, 102, 241, 0.3);}.quote-icon {color: var(--primary);font-size: 2rem;margin-bottom: 1.5rem;opacity: 0.3;}.testimonial-card p {font-size: 1.1rem;line-height: 1.7;margin-bottom: 2rem;font-style: italic;color: var(--text-main);}.testimonial-author h3 {color: var(--text-main);margin-bottom: 0.25rem;}.testimonial-author span {color: var(--text-muted);font-size: 0.9rem;}.floating-resume {position: fixed;bottom: 2rem;right: 2rem;background: var(--gradient-main);color: white;padding: 1rem 1.5rem;border-radius: 50px;font-weight: 600;box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);z-index: 9999;display: flex;align-items: center;gap: 0.5rem;transition: var(--transition);}.floating-resume:hover {transform: translateY(-5px) scale(1.05);box-shadow: 0 10px 30px rgba(99, 102, 241, 0.6);color: white;}.floating-resume,.floating-resume:visited,.floating-resume:active,.floating-resume:focus {color: white !important;text-decoration: none;}.email-row {display: flex;align-items: center;justify-content: center;gap: 0.5rem;margin-bottom: 0.5rem;}.copy-btn {background: none;border: none;color: var(--text-muted);cursor: pointer;transition: var(--transition);padding: 0.2rem;}.copy-btn:hover {color: var(--primary);transform: scale(1.1);}.toast {position: fixed;bottom: 2rem;left: 50%;transform: translateX(-50%) translateY(100px);background: var(--dark-card);border: 1px solid var(--primary);color: var(--text-main);padding: 0.75rem 1.5rem;border-radius: 50px;box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);opacity: 0;transition: all 0.3s ease;z-index: 10000;font-size: 0.9rem;font-weight: 500;display: flex;align-items: center;gap: 0.5rem;}.toast.show {transform: translateX(-50%) translateY(0);opacity: 1;}@media (max-width: 768px) {.mobile-toggle {display: block;}.nav-links {display: none;position: absolute;top: 100%;left: 0;width: 100%;background: rgba(15, 23, 42, 0.98);backdrop-filter: blur(15px);padding: 2rem;flex-direction: column;align-items: center;gap: 1.5rem;border-bottom: 1px solid rgba(255, 255, 255, 0.1);box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);}.nav-links.active {display: flex;animation: slideDown 0.3s ease-out forwards;}@keyframes slideDown {from {opacity: 0;transform: translateY(-10px);}to {opacity: 1;transform: translateY(0);}}.hero h1 {font-size: 2.8rem;}.mono-type {font-size: 1.5rem;}.section-header h2 {font-size: 2.2rem;}.section {padding: 4rem 0;}.skills-grid,.projects-grid,.testimonials-grid,.contact-grid {grid-template-columns: 1fr;gap: 2rem;}.timeline::before {left: 0;}.timeline-item {padding-left: 2rem;}.container {padding: 0 1.5rem;}.floating-resume {bottom: 1.5rem;right: 1.5rem;padding: 0.8rem 1.2rem;font-size: 0.9rem;}}@media (max-width: 480px) {.hero h1 {font-size: 2.2rem;}.hero-actions {flex-direction: column;width: 100%;}.btn {width: 100%;justify-content: center;}}.text-link {background: none;border: none;color: var(--text-muted);font-size: 0.85rem;cursor: pointer;margin-top: 0.5rem;text-decoration: underline;opacity: 0.7;transition: var(--transition);}.text-link:hover {color: var(--primary);opacity: 1;}.modal {display: none;position: fixed;z-index: 10001;left: 0;top: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.8);backdrop-filter: blur(5px);align-items: center;justify-content: center;opacity: 0;transition: opacity 0.3s ease;}.modal.show {opacity: 1;}.modal-content {background: var(--dark-card);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 20px;padding: 0;width: 90%;max-width: 600px;position: relative;box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);transform: translateY(20px);transition: transform 0.3s ease;}.modal.show .modal-content {transform: translateY(0);}.close-modal {position: absolute;top: 1rem;right: 1.5rem;color: var(--text-muted);font-size: 2rem;font-weight: bold;cursor: pointer;line-height: 1;transition: var(--transition);}.close-modal:hover {color: var(--primary);}.modal-header {padding: 1.5rem 2rem;border-bottom: 1px solid rgba(255, 255, 255, 0.05);}.modal-header h2 {font-size: 1.5rem;margin: 0;}.modal-body {padding: 2rem;line-height: 1.7;color: var(--text-muted);font-size: 1rem;}.modal-body p {margin-bottom: 1rem;}.modal-body ul {list-style: disc;margin-left: 1.5rem;margin-bottom: 1.5rem;}.modal-body li {margin-bottom: 0.5rem;}.modal-body strong {color: var(--text-main);}