:where([class^="ri-"])::before {
     content: "\f3c2"
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box
 }

 html {
     scroll-behavior: smooth
 }

 body {
     font-family: 'Inter', sans-serif;
     background: #0f172a;
     color: #e2e8f0;
     overflow-x: hidden
 }

 .gradient-text {
     background: linear-gradient(135deg, #818cf8 0%, #22d3ee 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text
 }

 .glass {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.2)
 }

 .glass-dark {
     background: rgba(15, 23, 42, 0.6);
     backdrop-filter: blur(12px);
     border: 1px solid rgba(255, 255, 255, 0.1)
 }

 .btn-gradient {
     background: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%)
 }

 .shadow-glow {
     box-shadow: 0 0 30px rgba(79, 70, 229, 0.3)
 }

 .grid-pattern {
     background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
     background-size: 30px 30px
 }

 .blob {
     filter: blur(80px);
     opacity: 0.3
 }

 @keyframes float {

     0%,
     100% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-20px)
     }
 }

 @keyframes bounce {

     0%,
     100% {
         transform: translateY(0)
     }

     50% {
         transform: translateY(-10px)
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 .animate-float {
     animation: float 6s ease-in-out infinite
 }

 .animate-bounce-slow {
     animation: bounce 2s ease-in-out infinite
 }

 .fade-in-up {
     animation: fadeInUp 0.8s ease-out forwards
 }

 .progress-bar {
     position: fixed;
     top: 0;
     left: 0;
     height: 3px;
     background: linear-gradient(90deg, #4f46e5, #06b6d4);
     z-index: 9999;
     transition: width 0.1s ease
 }

 .navbar-blur {
     backdrop-filter: blur(12px);
     background: rgba(15, 23, 42, 0.8);
     border-bottom: 1px solid rgba(255, 255, 255, 0.1)
 }

 !rounded-button {
     border-radius: 8px !important
 }

 input:focus,
 textarea:focus {
     outline: none
 }

 input::placeholder,
 textarea::placeholder {
     color: #94a3b8
 }

 .custom-checkbox {
     appearance: none;
     width: 20px;
     height: 20px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 4px;
     background: rgba(255, 255, 255, 0.1);
     cursor: pointer;
     position: relative;
     transition: all 0.3s
 }

 .custom-checkbox:checked {
     background: linear-gradient(135deg, #4f46e5, #06b6d4);
     border-color: #4f46e5
 }

 .custom-checkbox:checked::after {
     content: '✓';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     color: #fff;
     font-size: 12px;
     font-weight: bold
 }

 .custom-radio {
     appearance: none;
     width: 20px;
     height: 20px;
     border: 2px solid rgba(255, 255, 255, 0.3);
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     cursor: pointer;
     position: relative;
     transition: all 0.3s
 }

 .custom-radio:checked {
     border-color: #4f46e5
 }

 .custom-radio:checked::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: linear-gradient(135deg, #4f46e5, #06b6d4)
 }

 .custom-switch {
     appearance: none;
     width: 48px;
     height: 24px;
     background: rgba(255, 255, 255, 0.2);
     border-radius: 12px;
     cursor: pointer;
     position: relative;
     transition: all 0.3s
 }

 .custom-switch:checked {
     background: linear-gradient(135deg, #4f46e5, #06b6d4)
 }

 .custom-switch::after {
     content: '';
     position: absolute;
     top: 2px;
     left: 2px;
     width: 20px;
     height: 20px;
     background: #fff;
     border-radius: 50%;
     transition: all 0.3s
 }

 .custom-switch:checked::after {
     left: 26px
 }

 .skill-card {
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.1)
 }

 .skill-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2);
     border-color: rgba(79, 70, 229, 0.5)
 }

 .project-card {
     overflow: hidden;
     position: relative;
     transition: all 0.3s ease
 }

 .project-card:hover {
     transform: scale(1.03);
     box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3)
 }

 .project-overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(180deg, transparent 0%, rgba(15, 23, 42, 0.95) 100%);
     opacity: 0;
     transition: opacity 0.3s ease
 }

 .project-card:hover .project-overlay {
     opacity: 1
 }

 .timeline-line {
     position: absolute;
     left: 50%;
     top: 0;
     bottom: 0;
     width: 2px;
     background: linear-gradient(180deg, rgba(79, 70, 229, 0.5), rgba(6, 182, 212, 0.5));
     transform: translateX(-50%)
 }

 @media(max-width:768px) {
     .timeline-line {
         left: 20px
     }
 }

 .social-icon {
     transition: all 0.3s ease
 }

 .social-icon:hover {
     transform: translateY(-4px);
     box-shadow: 0 0 20px rgba(79, 70, 229, 0.5)
 }