/* Critical above-the-fold styles with modern enhancements */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-family:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;line-height:1.5;-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:hidden;overflow-y:auto;width:100%;max-width:100vw}
body{background:linear-gradient(135deg, #010103 0%, #1c1c21 100%);color:#ffffff;font-family:inherit;line-height:inherit;overflow-x:hidden;overflow-y:visible;position:relative;width:100%;max-width:100vw}
body::before{content:'';position:fixed;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%), radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.05) 0%, transparent 70%);pointer-events:none;z-index:-1;animation:backgroundPulse 8s ease-in-out infinite}
@keyframes backgroundPulse{0%,100%{opacity:0.8}50%{opacity:1}}
.fixed{position:fixed}.inset-0{top:0;right:0;bottom:0;left:0}.flex{display:flex}
.items-center{align-items:center}.justify-center{justify-content:center}.z-50{z-index:50}
.text-center{text-align:center}.text-lg{font-size:1.125rem;line-height:1.75rem}.font-bold{font-weight:700}
.text-white{color:#ffffff}.text-gray-400{color:#9ca3af}.p-8{padding:2rem}
.mb-4{margin-bottom:1rem}.mb-6{margin-bottom:1.5rem}
#loading-indicator{background:rgba(14, 14, 16, 0.95);backdrop-filter:blur(10px);z-index:9999;border:1px solid rgba(255,255,255,0.1)}
.animate-spin{animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.h-32{height:8rem}.w-32{width:8rem}.rounded-full{border-radius:9999px}
.border-b-2{border-bottom-width:2px}.border-white{border-color:#ffffff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.focus\:not-sr-only:focus{position:static;width:auto;height:auto;padding:inherit;margin:inherit;overflow:visible;clip:auto;white-space:normal}
.bg-blue-600{background-color:#2563eb}.px-4{padding-left:1rem;padding-right:1rem}
.py-2{padding-top:0.5rem;padding-bottom:0.5rem}.rounded-md{border-radius:0.375rem}.z-50{z-index:50}
/* Modern button styles with mobile fixes */
button,a[role="button"]{transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);position:relative;overflow:hidden;min-height:44px;min-width:44px;word-wrap:break-word;overflow-wrap:break-word}
button:hover,a[role="button"]:hover{transform:translateY(-2px);box-shadow:0 10px 25px rgba(0,0,0,0.2)}
/* Modern form styles with mobile fixes */
input,textarea,select{border:2px solid rgba(255,255,255,0.1);border-radius:8px;padding:12px 16px;background:rgba(255,255,255,0.05);color:#ffffff;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);width:100%;max-width:100%;box-sizing:border-box}
input:focus,textarea:focus,select:focus{border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59,130,246,0.1);outline:none}
/* Glassmorphism effects with mobile fixes */
.glass{background:rgba(255,255,255,0.05);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,0.1);word-wrap:break-word;overflow-wrap:break-word;overflow:hidden}
/* Modern root container styling */
#root{position:relative;z-index:1;min-height:100vh;width:100%;max-width:100vw;overflow-x:hidden;overflow-y:visible}
#root::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg, transparent 0%, rgba(59, 130, 246, 0.02) 25%, transparent 50%, rgba(139, 92, 246, 0.02) 75%, transparent 100%);pointer-events:none;z-index:-1}
/* Enhanced form styling with mobile fixes */
form{background:rgba(255,255,255,0.03);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:16px;padding:2rem;box-shadow:0 8px 32px rgba(0,0,0,0.3);width:100%;max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word}
/* Modern card effects with mobile fixes */
.card,.project-card,.work-item{background:rgba(255,255,255,0.03);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,0.1);border-radius:16px;transition:all 0.3s cubic-bezier(0.4, 0, 0.2, 1);width:100%;max-width:100%;box-sizing:border-box;word-wrap:break-word;overflow-wrap:break-word;overflow:hidden}
.card:hover,.project-card:hover,.work-item:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,0.4);border-color:rgba(59, 130, 246, 0.3)}
/* Immediate modernization effects */
.modernized-immediately{animation:fadeIn 0.5s ease-out}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Critical mobile responsive fixes */
@media (max-width:767px){
  html,body{overflow-x:hidden!important;width:100%!important;max-width:100vw!important}
  .text-3xl{font-size:clamp(1.5rem,4vw,2rem)!important;line-height:1.2!important;word-wrap:break-word!important;overflow-wrap:break-word!important}
  .text-lg{font-size:clamp(1rem,3vw,1.25rem)!important;line-height:1.4!important}
  button,a[role="button"]{min-height:44px!important;min-width:44px!important;padding:8px 12px!important;margin:4px!important;word-wrap:break-word!important;overflow-wrap:break-word!important}
  input,textarea,select{width:100%!important;max-width:100%!important;min-height:44px!important;padding:12px 16px!important;font-size:16px!important;box-sizing:border-box!important}
  .card,.project-card,.work-item,.glass{width:100%!important;max-width:100%!important;padding:16px!important;margin:8px 0!important;box-sizing:border-box!important}
  .flex{flex-wrap:wrap!important;gap:8px!important}
  .container{width:100%!important;max-width:100vw!important;padding-left:16px!important;padding-right:16px!important;overflow-x:hidden!important}
  #features-fab{bottom:20px!important;right:16px!important;z-index:1000!important;width:56px!important;height:56px!important}
  #features-panel{position:absolute!important;bottom:70px!important;right:0!important;width:280px!important;max-width:calc(100vw - 32px)!important;transform:translateX(calc(100% - 56px))!important;z-index:999!important}
}