/* Critical CSS - Above-the-Fold Only (~3KB instead of full 102KB) *//* Theme Variables */:root{--bg-primary:#ffffff;--bg-secondary:#f8f9fa;--bg-header:#ffffff;--text-primary:#313131;--text-secondary:#6e6e6e;--text-muted:#888888;--border-color:#e9ecef;--shadow:rgba(0,0,0,0.1);--accent-color:#ff0077;}html.dark-mode{--bg-primary:#151515;--bg-secondary:#1a1a1a;--bg-header:#000000;--text-primary:#ffffff;--text-secondary:#dddcdce9;--text-muted:#888888;--border-color:#333333;--shadow:rgba(255,255,255,0.1);--accent-color:#ff0077;}/* Base Styles */html{font-size:62.5%;-webkit-font-smoothing:antialiased;}body{font-family:"Lora",serif;font-size:1.7rem;line-height:3rem;color:var(--text-secondary);background-color:var(--bg-primary);margin:0;padding:0;padding-top:70px;}/* Header Styles - Critical for LCP */header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(21,21,21,0.95);backdrop-filter:blur(10px);transition:all 0.3s ease;}.nav-container{max-width:1200px;margin:0 auto;padding:0 30px;display:flex;justify-content:space-between;align-items:center;height:70px;}.nav-logo a{color:var(--text-primary);font-size:2.4rem;font-weight:700;text-decoration:none;}/* Intro Section - Above the Fold */#intro{background:url(../images/intro-bg.webp) no-repeat center bottom;background-size:cover;background-attachment:fixed;width:100%;height:100vh;min-height:720px;display:table;position:relative;text-align:center;}.intro-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.85);}.intro-content{display:table-cell;vertical-align:middle;text-align:center;transform:translateY(2.1rem);}#intro h1{font-family:"Poppins",sans-serif;color:#ffffff;font-size:8.4rem;line-height:1.071;margin-bottom:0;text-shadow:0 0 20px rgba(0,0,0,0.5);}#intro h5{color:var(--accent-color);font-size:2.3rem;line-height:1.565;margin-bottom:0;text-transform:uppercase;letter-spacing:0.3rem;}/* Typing Animation Container */.intro-position{font-family:"Poppins",sans-serif;font-size:1.7rem;line-height:2.4rem;text-transform:uppercase;letter-spacing:0.2rem;color:rgba(255,255,255,0.7);margin-bottom:0;}/* Social Icons */.intro-social{display:block;margin:3rem 0 0 0;padding:0;font-size:3rem;text-shadow:0 0 6px rgba(0,0,0,0.5);}.intro-social li{display:inline-block;margin:0 20px;padding:0;}.intro-social li a{color:#ffffff;transition:all 0.3s ease-in-out;}/* Buttons */.button{display:inline-block;font-family:"Poppins",sans-serif;font-size:1.4rem;text-transform:uppercase;letter-spacing:0.3rem;height:5.4rem;line-height:5.4rem;padding:0 3rem;margin:0 0.3rem 1.2rem 0;background:var(--accent-color);color:#ffffff;text-decoration:none;cursor:pointer;text-align:center;white-space:nowrap;border:none;transition:all 0.3s ease-in-out;}.button.stroke{background:transparent;border:2px solid rgba(255,255,255,0.3);line-height:5rem;}/* Scrolldown Link */.scrolldown{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);}/* Theme Toggle - Modern Switch */.theme-toggle{position:relative;display:inline-block;}#theme-toggle-btn{background:linear-gradient(135deg,#667eea 0%,#764ba2 100%);border:none;border-radius:34px;cursor:pointer;width:60px;height:30px;transition:all 0.3s ease;position:relative;}#theme-toggle-btn::before{content:'';position:absolute;width:24px;height:24px;background:#ffffff;border-radius:50%;transition:transform 0.3s ease;box-shadow:0 2px 4px rgba(0,0,0,0.2);left:3px;top:3px;}html.dark-mode #theme-toggle-btn::before{transform:translateX(30px);}/* Mobile Responsive */@media only screen and (max-width:768px){#intro h1{font-size:5.2rem;}#intro h5{font-size:1.8rem;}.intro-social{font-size:2.5rem;}.nav-container{padding:0 20px;height:60px;}#theme-toggle-btn{width:54px;height:28px;}#theme-toggle-btn::before{width:22px;height:22px;}html.dark-mode #theme-toggle-btn::before{transform:translateX(26px);}}/* Preloader - Critical for UX */#preloader{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--bg-primary);z-index:9999;height:100vh;width:100%;}.no-js #preloader,.oldie #preloader{display:none;}#loader{position:absolute;left:50%;top:50%;width:60px;height:60px;margin:-30px 0 0 -30px;border-radius:50%;border:3px solid transparent;border-top-color:var(--accent-color);animation:spin 1s linear infinite;}@keyframes spin{0%{transform:rotate(0deg);}100%{transform:rotate(360deg);}}