@tailwind base;@tailwind components;@tailwind utilities;:root{--font-sans: "Inter", system-ui, Avenir, Helvetica, Arial, sans-serif;--color-bg: #2e2e2e;--color-text: #ffffff;--color-accent: #3b82f6;--color-accent-hover: #6366f1;--color-btn-bg: #3b82f6;--color-btn-text: #ffffff}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font-sans);color:var(--color-text);background-color:var(--color-bg);line-height:1.5;font-weight:400}a{font-weight:500;color:var(--color-accent);text-decoration:none;transition:color .3s ease}a:hover{color:var(--color-accent-hover)}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.2;color:var(--color-text)}nav{position:fixed;top:0;width:100%;background-color:#2e2e2e;box-shadow:0 4px 12px #0000004d;z-index:100;transition:background .3s ease,box-shadow .3s ease;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:fadeInNavbar .8s ease-out forwards;opacity:0}nav>div{max-width:1200px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}nav .logo{font-size:1.5rem;font-weight:800;color:#fff;text-transform:uppercase;letter-spacing:1px;transition:color .3s ease;animation:fadeInLogo 1s ease-out forwards;opacity:0}nav ul.desktop-menu{display:flex;gap:2rem;list-style:none;animation:fadeInMenu 1s ease-out forwards;opacity:0}nav ul.desktop-menu li a{color:#fff;font-weight:600;text-decoration:none;transition:color .3s ease,transform .2s ease;position:relative}nav ul.desktop-menu li a:after{content:"";position:absolute;bottom:-4px;left:0;width:0%;height:2px;background:linear-gradient(to right,#3b82f6,#6366f1);transition:width .3s ease}nav ul.desktop-menu li a:hover{color:#3b82f6;transform:scale(1.05)}nav ul.desktop-menu li a:hover:after{width:100%}button.menu-toggle{background:none;border:none;cursor:pointer;display:flex;flex-direction:column;gap:.3rem;padding:.5rem}button.menu-toggle span{display:block;width:1.5rem;height:2px;background-color:#fff;transition:transform .3s ease}nav ul.mobile-menu{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:1rem 0;background-color:#2e2e2e;box-shadow:0 4px 12px #0000004d;list-style:none;transition:max-height .3s ease}nav ul.mobile-menu li a{font-size:1.125rem;font-weight:600;color:#fff;text-decoration:none;transition:color .3s ease}nav ul.mobile-menu li a:hover{color:#3b82f6}@keyframes fadeInNavbar{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLogo{0%{opacity:0;transform:translate(-20px)}to{opacity:1;transform:translate(0)}}@keyframes fadeInMenu{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}@media (min-width: 768px){nav ul.mobile-menu{display:none}button.menu-toggle{display:none}}@media (max-width: 767px){nav ul.desktop-menu{display:none}nav>div{flex-direction:column;align-items:center}nav .logo{margin-bottom:1rem}}#hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:0 2rem;background:linear-gradient(135deg,#f9fafb,#e5e7eb);color:#111827;text-align:center;position:relative;overflow:hidden;border-radius:1.5rem;box-shadow:0 12px 30px #00000014;animation:fadeIn 1s ease-out forwards;opacity:0}#hero:before{content:"";position:absolute;top:-40%;left:-40%;width:180%;height:180%;background:radial-gradient(circle at center,rgba(51,51,51,.08),transparent 70%);animation:rotateBg 30s linear infinite;z-index:0}#hero h1{font-size:3.5rem;font-weight:900;margin-bottom:1rem;z-index:1;text-transform:uppercase;letter-spacing:2px;color:#fff;text-shadow:1px 1px 4px rgba(0,0,0,.05);white-space:nowrap;overflow:hidden;border-right:3px solid #333333;animation:typing 3s steps(30,end),blink .75s step-end infinite}#hero p{font-size:1.25rem;color:#374151;margin:0;max-width:700px;z-index:1;animation:slideUp 1.2s ease-out forwards;opacity:0;line-height:1.8}#hero .cta-button{margin-top:2rem;padding:.75rem 2rem;font-size:1rem;font-weight:600;color:#fff;background:linear-gradient(to right,#4b5563,#333);border:none;border-radius:.75rem;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;z-index:1;box-shadow:0 6px 20px #3333334d}#hero .cta-button:hover{transform:scale(1.05);box-shadow:0 10px 30px #3336}@keyframes fadeIn{to{opacity:1}}@keyframes slideUp{0%{transform:translateY(40px);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes rotateBg{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes typing{0%{width:0}to{width:100%}}@keyframes blink{0%,to{border-color:transparent}50%{border-color:#fff}}@media (prefers-color-scheme: dark){#hero{background:linear-gradient(135deg,#2c2c2c,#1a1a1a);color:#f9fafb}#hero p{color:#d1d5db}#hero .cta-button{background:linear-gradient(to right,#4b5563,#333);color:#fff}#hero .cta-button:hover{box-shadow:0 10px 30px #4b556366}}@media (max-width: 768px){#hero h1{font-size:2.5rem}#hero p{font-size:1.1rem}#hero .cta-button{font-size:.95rem;padding:.65rem 1.5rem}}@media (max-width: 480px){#hero h1{font-size:2rem}#hero p{font-size:1rem}#hero .cta-button{font-size:.9rem;padding:.6rem 1.25rem}}.top-frame{width:100%;height:40px;background-color:#333;position:fixed;top:0;left:0;z-index:1000}#about{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:4rem 2rem;width:100%;height:100vh;background:linear-gradient(135deg,#333,#1a1a1a);border-radius:0;box-shadow:0 20px 60px #0000001a;transition:background .3s ease,box-shadow .3s ease,transform .3s ease;opacity:0;transform:translateY(40px);animation:slideUp 1s ease-out forwards}#about img{width:220px;height:220px;border-radius:50%;object-fit:cover;box-shadow:0 15px 30px #0003;transition:transform .5s ease,box-shadow .5s ease;border:4px solid #ffffff;animation:fadeInImage 1.5s ease-out forwards;opacity:0}#about img:hover{transform:scale(1.15) rotate(3deg);box-shadow:0 25px 45px #0000004d}#about h2{font-size:3rem;font-weight:900;color:#fff;margin-top:2rem;margin-bottom:1rem;position:relative;text-transform:uppercase;letter-spacing:1.5px;text-shadow:1px 1px 2px rgba(0,0,0,.05);text-align:center;animation:fadeInTitle 1.2s ease-out forwards;opacity:0}#about h2:after{content:"";display:block;width:100px;height:5px;background:linear-gradient(to right,#6b7280,#4b5563);margin:.75rem auto 0;border-radius:3px}#about p{font-size:1.25rem;color:#fff;max-width:800px;margin-top:1rem;line-height:1.8;font-weight:500;text-align:center;animation:fadeInText 1.5s ease-out forwards;opacity:0}@keyframes fadeInTitle{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInText{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInImage{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes slideUp{to{opacity:1;transform:translateY(0)}}@media (prefers-color-scheme: dark){#about{background-color:#2c2c2c;box-shadow:0 20px 60px #ffffff0d}#about h2,#about p{color:#f9fafb}#about h2:after{background:linear-gradient(to right,#6b7280,#4b5563)}#about img{border-color:#2c2c2c}}@media (min-width: 768px){#about{flex-direction:row;gap:3rem;text-align:center}#about img{width:260px;height:260px}#about h2{font-size:3.5rem;text-align:center}#about p{font-size:1.35rem;text-align:center}}section#skills{width:100%;background:linear-gradient(135deg,#2c2c2c,#1a1a1a);padding:5rem 1.5rem;animation:fadeInSection 1.2s ease-out forwards;opacity:0;text-align:center;overflow:visible}section#skills h2{font-size:2.5rem;font-weight:800;margin-bottom:3rem;color:#fff;text-transform:uppercase;letter-spacing:2px;animation:fadeInTitle 1s ease-out forwards;opacity:0;position:relative}section#skills h2:after{content:"";display:block;width:80px;height:4px;background:linear-gradient(to right,#3b82f6,#6366f1);margin:.75rem auto 0;border-radius:2px}section#skills h3{font-size:1.75rem;font-weight:700;color:#fff;margin-bottom:2rem;animation:fadeInTitle 1s ease-out forwards;opacity:0;position:relative}section#skills h3:after{content:"";display:block;width:60px;height:3px;background:#fff;margin:.5rem auto 0;border-radius:2px}section#skills>div>div{max-width:1120px;margin:0 auto;display:grid;justify-content:center;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:2rem;animation:fadeInGrid 1.5s ease-out forwards;opacity:0;overflow:visible;position:relative}.skill-card{position:relative;overflow:hidden;transition:transform .4s ease,box-shadow .4s ease,max-height .4s ease,padding .4s ease;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:1.2rem;background:radial-gradient(circle at top left,#444,#222);border-radius:1rem;box-shadow:0 6px 12px #0000004d;transform-origin:center center;aspect-ratio:1 / 1;cursor:pointer}.skill-card:hover{transform:scale(1.5);z-index:50;box-shadow:0 0 60px #6366f199}.skill-card.active{transform:scale(1.8);z-index:100;max-height:500px;padding:2rem;box-shadow:0 0 80px #6366f1cc}.skill-card img{width:3.5rem;height:3.5rem;margin-bottom:.5rem;filter:drop-shadow(0 0 5px #fff5);transition:transform .3s ease}.skill-card:hover img,.skill-card.active img{transform:scale(1.1)}.skill-card p{color:#e0e0e0;font-weight:600;text-align:center;margin:.25rem 0;font-size:1rem;letter-spacing:.5px}.skill-card .tooltip{display:none;margin-top:.75rem;color:#ccc;font-size:.9rem;line-height:1.4;padding:.5rem 1rem;background-color:#1e1e1ef2;border-radius:.5rem;max-width:220px;text-align:center;animation:fadeInTooltip .3s ease forwards}.skill-card:hover .tooltip,.skill-card.active .tooltip{display:block;font-size:1rem;line-height:1.6;max-width:100%}@keyframes fadeInTooltip{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInSection{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInTitle{0%{opacity:0;transform:scale(.9) translateY(-30px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeInGrid{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeInCard{0%{opacity:0;transform:translateY(20px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}:root{--bg-dark: #1f1f1f;--card-bg: #2b2b2b;--accent: #3b82f6;--accent2: #6366f1;--text-light: #ffffff;--text-muted: #d1d5db;--shadow: rgba(0, 0, 0, .5);--transition-fast: .3s ease;--transition-slow: .6s ease;--radius: .75rem}section#projects{width:100%;padding:5rem 1.5rem;background-color:var(--bg-dark);box-shadow:0 12px 30px var(--shadow);transition:background .3s ease;overflow-x:hidden}section#projects h2{font-size:2.75rem;font-weight:800;color:var(--text-light);margin-bottom:2.5rem;text-align:center;text-transform:uppercase;letter-spacing:1px;position:relative}section#projects h2:after{content:"";display:block;width:80px;height:4px;background:linear-gradient(to right,var(--accent),var(--accent2));margin:.75rem auto 0;border-radius:2px}.projects-grid{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:2rem;padding-bottom:4rem}.project-card{background-color:var(--card-bg);border-radius:var(--radius);box-shadow:0 6px 12px var(--shadow);overflow:hidden;transition:transform .4s ease,box-shadow .4s ease;display:flex;flex-direction:column;position:relative;z-index:1;transform-origin:center center;will-change:transform}.project-card:hover{transform:scale(1.4);z-index:10;box-shadow:0 20px 40px #000000b3;transition:transform .5s cubic-bezier(.25,1,.5,1),box-shadow .5s ease}.project-card img{width:100%;height:200px;object-fit:cover;transition:transform var(--transition-fast)}.project-card:hover img{transform:scale(1.05)}.project-card .content{padding:1.25rem;flex-grow:1;display:flex;flex-direction:column;justify-content:space-between;transition:opacity .3s ease}.project-card h3{font-size:1.5rem;font-weight:700;margin-bottom:.75rem;color:var(--text-light)}.project-card p{color:var(--text-muted);margin-bottom:1rem;line-height:1.6}.project-card a{color:var(--text-light);font-weight:600;text-decoration:none;transition:color var(--transition-fast),transform var(--transition-fast)}.project-card a:hover{color:var(--accent);transform:translate(4px);text-decoration:underline}@media (max-width: 1024px){.project-card:hover{transform:scale(1.2)}}@media (max-width: 768px){.project-card:hover{transform:scale(1.1)}section#projects h2{font-size:2.25rem}.project-card h3{font-size:1.25rem}.project-card p{font-size:.95rem}}@media (max-width: 480px){.project-card:hover{transform:scale(1.05)}section#projects h2{font-size:1.75rem}.project-card h3{font-size:1.1rem}.project-card p{font-size:.9rem}}@keyframes glow{0%{box-shadow:0 0 #3b82f666}50%{box-shadow:0 0 20px #3b82f699}to{box-shadow:0 0 #3b82f666}}.project-card:hover{animation:glow 1.5s infinite}.project-card:before{content:"";position:absolute;inset:-10px;background:linear-gradient(45deg,var(--accent),var(--accent2));opacity:0;z-index:-1;transition:opacity .4s ease;border-radius:var(--radius)}.project-card:hover:before{opacity:.2}::-webkit-scrollbar{width:8px}::-webkit-scrollbar-track{background:var(--bg-dark)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--accent2)}.project-card{opacity:0;transform:translateY(40px);animation:fadeInCard .8s ease-out forwards}@keyframes fadeInCard{to{opacity:1;transform:translateY(0)}}.project-card:hover .content{opacity:1}.project-card .content h3,.project-card .content p,.project-card .content a{transition:transform .3s ease,color .3s ease}.project-card:hover .content h3{transform:translateY(-2px);color:var(--accent)}.project-card:hover .content p{transform:translateY(-1px)}.project-card:hover .content a{transform:translate(6px);color:var(--accent2)}section#projects{background:radial-gradient(circle at top left,#1f1f1f,#121212)}.projects-grid:before{content:"";position:absolute;top:0;left:50%;width:2px;height:100%;background:linear-gradient(to bottom,var(--accent),transparent);opacity:.1;transform:translate(-50%);z-index:0}.project-card:hover{filter:brightness(1.1) contrast(1.2)}.project-card:hover{animation:bounce .6s}@keyframes bounce{0%{transform:scale(1.4) translateY(0)}50%{transform:scale(1.45) translateY(-10px)}to{transform:scale(1.4) translateY(0)}}#contact{background-color:#2e2e2e;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6rem 2rem;border-radius:2rem;box-shadow:0 20px 60px #0000004d;transition:all .3s ease;animation:fadeInSection 1s ease-out forwards;opacity:0}#contact h2{font-family:Segoe UI,sans-serif;font-weight:800;font-size:2.75rem;margin-bottom:2rem;text-align:center;position:relative;text-transform:uppercase;letter-spacing:1px;animation:fadeInTitle 1s ease-out forwards;opacity:0}#contact h2:after{content:"";display:block;width:80px;height:4px;background:linear-gradient(to right,#3b82f6,#6366f1);margin:.75rem auto 0;border-radius:2px}#contact form{display:flex;flex-direction:column;gap:1.5rem;width:100%;max-width:500px;animation:fadeInForm 1.2s ease-out forwards;opacity:0;transform:translateY(30px)}#contact input,#contact textarea{background-color:#3a3a3a;color:#fff;border:1px solid #555;border-radius:.75rem;padding:1rem;font-size:1rem;font-family:inherit;transition:border-color .3s,box-shadow .3s;width:100%;box-shadow:0 4px 12px #0003}#contact input::placeholder,#contact textarea::placeholder{color:#ccc}#contact input:focus,#contact textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f14d}#contact button{font-family:inherit;font-weight:700;background-color:#3b82f6;color:#fff;padding:1rem 1.5rem;border-radius:.75rem;border:none;cursor:pointer;transition:background-color .3s,transform .2s;width:100%;box-shadow:0 6px 20px #3b82f64d;animation:fadeInButton 1.4s ease-out forwards;opacity:0;transform:translateY(30px)}#contact button:hover{background-color:#2563eb;transform:scale(1.05)}@keyframes fadeInSection{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInTitle{0%{opacity:0;transform:scale(.95) translateY(-20px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes fadeInForm{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInButton{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){#contact h2{font-size:2rem}#contact form{gap:1rem}#contact input,#contact textarea{font-size:.95rem}#contact button{font-size:1rem}}footer{background-color:#2e2e2e;color:#fff;padding:2rem 1rem;margin-top:6rem;font-family:Segoe UI,sans-serif;text-align:center;border-top:1px solid #444;box-shadow:0 -10px 30px #0000004d;transition:background .3s ease;animation:fadeInFooter 1s ease-out forwards;opacity:0}footer a{color:#fff;transition:color .3s ease,transform .2s ease;text-decoration:none;font-weight:600;position:relative}footer a:after{content:"";display:block;width:0%;height:2px;background-color:#3b82f6;transition:width .3s ease;position:absolute;bottom:-4px;left:0}footer a:hover{color:#3b82f6;transform:scale(1.05)}footer a:hover:after{width:100%}footer .max-w-7xl{display:flex;flex-direction:column;align-items:center;gap:.75rem;max-width:1280px;margin:0 auto;animation:fadeInLinks 1.2s ease-out forwards;opacity:0}footer .flex{display:flex;justify-content:center;gap:1.25rem;flex-wrap:wrap}@keyframes fadeInFooter{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInLinks{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media (max-width: 640px){footer{padding:2rem 1rem}footer a{font-size:.95rem}footer .flex{gap:.75rem}}