:root{
  --bg:#0b0b0b;
  --card:#121214;
  --muted:#9aa0a6;
  --accent:#ff2e2e;
  --glow: 0 0 12px rgba(255,46,46,0.25);
}
*{box-sizing:border-box}
html,body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
body{background:linear-gradient(135deg,#0a0a0b 0%, #0f0f12 40%, #1a0f0f 100%);color:var(--muted);display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding:32px;min-height:100vh;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;overflow-x:hidden;animation:bgShift 28s ease-in-out infinite}

@keyframes bgShift{0%{background:linear-gradient(135deg,#0a0a0b 0%, #0f0f12 40%, #1a0f0f 100%)}50%{background:linear-gradient(135deg,#0f0f12 0%, #1a0a0f 40%, #0f0a1a 100%)}100%{background:linear-gradient(135deg,#0a0a0b 0%, #0f0f12 40%, #1a0f0f 100%)}}

/* dynamic patterned overlay with smooth animation */
body::before{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.06;background-image:repeating-linear-gradient(45deg, rgba(255,46,46,0.08) 0 1.5px, transparent 1.5px 7px), repeating-linear-gradient(-45deg, rgba(100,200,255,0.04) 0 2px, transparent 2px 9px);background-size:220px 220px, 280px 280px;animation:movePattern 180s linear infinite;mix-blend-mode:screen}

@keyframes movePattern{0%{background-position:0 0, 0 0}50%{background-position:300px 300px, -200px 200px}100%{background-position:600px 600px, -400px 400px}}

/* enhanced animated background layer with gradient flow */
body::after{content:'';position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0.05;background:radial-gradient(ellipse 800px 600px at 30% 20%, rgba(100,200,255,0.12) 0%, transparent 35%), radial-gradient(ellipse 900px 700px at 70% 60%, rgba(255,46,46,0.1) 0%, transparent 40%);animation:flowBg 35s ease-in-out infinite;mix-blend-mode:overlay}

@keyframes flowBg{0%{background:radial-gradient(ellipse 800px 600px at 30% 20%, rgba(100,200,255,0.12) 0%, transparent 35%), radial-gradient(ellipse 900px 700px at 70% 60%, rgba(255,46,46,0.1) 0%, transparent 40%)}50%{background:radial-gradient(ellipse 800px 600px at 50% 40%, rgba(100,200,255,0.1) 0%, transparent 35%), radial-gradient(ellipse 900px 700px at 50% 70%, rgba(255,46,46,0.12) 0%, transparent 40%)}100%{background:radial-gradient(ellipse 800px 600px at 30% 20%, rgba(100,200,255,0.12) 0%, transparent 35%), radial-gradient(ellipse 900px 700px at 70% 60%, rgba(255,46,46,0.1) 0%, transparent 40%)}}

.container{width:100%;max-width:920px;position:relative;z-index:1}
.card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.04);padding:22px;border-radius:14px;margin-bottom:18px;transition:all 280ms cubic-bezier(.34,.1,.68,.55);position:relative;overflow:hidden}
.card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,46,46,0.1), transparent 50%);opacity:0;transition:opacity 300ms ease;pointer-events:none}
.card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,0.6), 0 0 40px rgba(255,46,46,0.08);border-color:rgba(255,46,46,0.1)}
.card:hover::before{opacity:1}
.header{display:flex;align-items:center;gap:18px;padding:26px}
.header-left{display:flex;align-items:center;gap:14px}
.header-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.avatar{width:88px;height:88px;border-radius:50%;background:linear-gradient(135deg,#1b1b1b,#111);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:36px;box-shadow:var(--glow);border:1px solid rgba(255,46,46,0.12);position:relative;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
.avatar-letter{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:36px}
.avatar img.loaded + .avatar-letter{display:none}

.reload-btn{background:linear-gradient(180deg,rgba(255,46,46,0.04),rgba(255,46,46,0.02));border:1px solid rgba(255,46,46,0.12);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;transition:all 220ms cubic-bezier(.2,.9,.2,1);font-size:14px;font-weight:500;position:relative;overflow:hidden}
.reload-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.2),transparent);transform:translateX(-100%);transition:transform 600ms ease}
.reload-btn:hover{color:#ff9999;border-color:rgba(255,46,46,0.3);box-shadow:0 6px 24px rgba(255,46,46,0.2)}
.reload-btn:hover::before{transform:translateX(100%)}
.reload-btn:active{transform:scale(0.96)}

/* friends button */
.friends-btn{background:linear-gradient(180deg,rgba(100,200,255,0.08),rgba(100,200,255,0.04));border:1px solid rgba(100,200,255,0.15);color:#fff;padding:10px 14px;border-radius:10px;cursor:pointer;transition:all 220ms cubic-bezier(.2,.9,.2,1);font-size:14px;font-weight:500;position:relative;overflow:hidden}
.friends-btn::before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(100,200,255,0.2),transparent);transform:translateX(-100%);transition:transform 600ms ease}
.friends-btn:hover{color:#90d5ff;border-color:rgba(100,200,255,0.3);box-shadow:0 6px 24px rgba(100,200,255,0.15)}
.friends-btn:hover::before{transform:translateX(100%)}
.friends-btn:active{transform:scale(0.96)}

/* friends modal */
.friends-modal{position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,0.6);backdrop-filter:blur(10px) saturate(1.2);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;transform:scale(0.85) translateY(-20px);pointer-events:none;transition:all 320ms cubic-bezier(.34,.1,.68,.55)}
.friends-modal.active{opacity:1;transform:scale(1) translateY(0);pointer-events:auto}
.friends-modal-content{background:linear-gradient(180deg, rgba(15,15,20,0.98), rgba(10,10,15,0.95));border:1px solid rgba(255,46,46,0.15);border-radius:20px;width:100%;max-width:700px;max-height:85vh;overflow-y:auto;box-shadow:0 25px 80px rgba(0,0,0,0.9), 0 0 100px rgba(255,46,46,0.12), inset 0 1px 0 rgba(255,255,255,0.05);position:relative}
.friends-modal-header{padding:28px;border-bottom:1px solid rgba(255,46,46,0.1);display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;background:linear-gradient(180deg, rgba(20,20,28,0.99), rgba(15,15,20,0.95));z-index:10;backdrop-filter:blur(8px)}
.friends-modal-header h2{margin:0;color:#fff;font-size:26px;font-weight:700;background:linear-gradient(120deg,#fff,#ff6b6b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.friends-controls{display:flex;gap:12px;align-items:center}
.friends-controls input[type="search"]{padding:10px 12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:rgba(255,255,255,0.02);color:#fff;min-width:220px}
.friend-detail{width:320px;background:linear-gradient(180deg,rgba(20,20,28,0.98),rgba(15,15,20,0.96));border-left:1px solid rgba(255,255,255,0.03);padding:18px;border-top-right-radius:12px;border-bottom-right-radius:12px;margin-left:12px;position:sticky;top:80px;align-self:flex-start}
.friend-detail-inner{display:flex;flex-direction:column;align-items:center;gap:10px}
.friend-detail-avatar{width:96px;height:96px;border-radius:50%;background:linear-gradient(135deg,#1b1b1b,#111);display:flex;align-items:center;justify-content:center;font-size:42px;color:#fff;border:1px solid rgba(255,46,46,0.08);box-shadow:var(--glow)}
.friend-links{display:flex;flex-direction:column;gap:8px;width:100%}
.friend-links a{display:block;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,0.02);color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,0.03)}
.friends-body{display:flex;gap:12px}
.close-modal{background:linear-gradient(135deg,rgba(255,46,46,0.1),rgba(255,46,46,0.05));border:1px solid rgba(255,46,46,0.2);color:#fff;width:44px;height:44px;border-radius:12px;cursor:pointer;font-size:22px;transition:all 220ms cubic-bezier(.2,.9,.2,1);display:flex;align-items:center;justify-content:center}
.close-modal:hover{background:linear-gradient(135deg,rgba(255,46,46,0.2),rgba(255,46,46,0.1));border-color:rgba(255,46,46,0.4);color:#ff9999;transform:rotate(90deg)}
.friends-list{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:16px;padding:28px;background:radial-gradient(ellipse 400px 300px at 50% 0%, rgba(255,46,46,0.03), transparent 70%)}

/* friend card with creative design */
.friend-card{background:linear-gradient(135deg,rgba(255,46,46,0.08),rgba(100,200,255,0.08));border:1.5px solid rgba(255,46,46,0.15);border-radius:16px;padding:20px;text-align:center;cursor:pointer;transition:all 300ms cubic-bezier(.34,.1,.68,.55);animation:slideUp 500ms cubic-bezier(.34,.1,.68,.55) forwards;opacity:0;transform:translateY(25px);position:relative;overflow:hidden}
.friend-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,46,46,0.2),rgba(100,200,255,0.2));opacity:0;transition:opacity 300ms ease;pointer-events:none}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
.friend-card:hover{background:linear-gradient(135deg,rgba(255,46,46,0.15),rgba(100,200,255,0.15));border-color:rgba(255,46,46,0.35);transform:translateY(-10px);box-shadow:0 15px 40px rgba(255,46,46,0.2), 0 0 30px rgba(100,200,255,0.1)}
.friend-card:hover::before{opacity:1}
.friend-emoji{font-size:52px;margin-bottom:12px;transition:all 400ms cubic-bezier(.34,.1,.68,.55);display:inline-block;line-height:1}
.friend-card:hover .friend-emoji{transform:scale(1.25) rotateZ(8deg);filter:drop-shadow(0 0 10px rgba(255,46,46,0.3))}
.friend-name{margin:12px 0 6px;color:#fff;font-size:17px;font-weight:700;position:relative;z-index:1}
.friend-role{margin:0;color:#64c8ff;font-size:13px;position:relative;z-index:1;opacity:0.9}
.head-text h1{margin:0;color:#fff;font-size:30px}
.head-text p{margin:6px 0 0;color:#c0c6ca;font-size:14px}
.about h2, .details h3{color:#fff;margin-top:0}
.details{display:flex;gap:20px}
.details div{flex:1}
ul{padding-left:20px;margin:8px 0;color:#d0d6dc !important;line-height:1.8}
ul li{margin:8px 0;color:#d0d6dc !important;font-size:15px}
.contact{background:linear-gradient(180deg, rgba(255,46,46,0.02), rgba(255,255,255,0.01))}
.contact h3{color:#fff}
.contact p{margin:6px 0 0;color:#d0d6dc !important;font-size:15px;line-height:1.6}
.links{display:flex;flex-wrap:wrap;gap:8px}
.links a{display:inline-flex;align-items:center;margin-right:0;padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,rgba(255,46,46,0.08),rgba(255,46,46,0.04));color:#fff;text-decoration:none;border:1px solid rgba(255,46,46,0.2);transition:all 220ms cubic-bezier(.2,.9,.2,1);font-size:14px;font-weight:500}
.links a:hover{color:#ff9999;box-shadow:0 8px 24px rgba(255,46,46,0.18);border-color:rgba(255,46,46,0.4);transform:translateY(-2px)}
.footer{text-align:center;color:var(--muted);padding:12px;position:relative}
.footer::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent, rgba(255,46,46,0.04));pointer-events:none;border-radius:14px}

/* pixelation vfx effect at bottom */
.pixelated-zone{position:fixed;bottom:0;left:0;right:0;height:280px;pointer-events:none;z-index:2;background:linear-gradient(180deg,transparent 0%, rgba(0,0,0,0.1) 100%);-webkit-mask-image:linear-gradient(180deg,transparent 0%, black 40%);mask-image:linear-gradient(180deg,transparent 0%, black 40%)}
.pixelated-zone canvas{position:absolute;inset:0;width:100%;height:100%}
.pixelated-zone.pixelate{animation:pixelateIn 1.6s cubic-bezier(.2,.9,.2,1) forwards}
@keyframes pixelateIn{0%{opacity:0}40%{opacity:0}60%{opacity:1}100%{opacity:0.8;filter:blur(6px)}}

/* crisp, subtle accent for headings */
h2, h3{position:relative}
h2::after, h3::after{content:'';position:absolute;left:0;bottom:-8px;width:64px;height:6px;background:linear-gradient(90deg,var(--accent),rgba(255,46,46,0.65));border-radius:6px;opacity:0.95}

/* hobbies, skills, contact sections - rebuilt */
.hobbies-section h2, .skills-section h2, .contact-section h2{color:#fff;margin-top:0;margin-bottom:14px}

.items-grid{display:grid;grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));gap:10px}
.items-grid .item{padding:12px 14px;background:linear-gradient(135deg,rgba(255,46,46,0.06),rgba(100,200,255,0.04));border:1px solid rgba(255,46,46,0.15);border-radius:10px;color:#d0d6dc;font-size:14px;line-height:1.5;transition:all 220ms cubic-bezier(.34,.1,.68,.55);cursor:default;word-wrap:break-word;white-space:pre-wrap;position:relative;overflow:hidden}
.items-grid .item::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,46,46,0.1),transparent);opacity:0;transition:opacity 220ms ease}
.items-grid .item:hover{background:linear-gradient(135deg,rgba(255,46,46,0.12),rgba(100,200,255,0.08));border-color:rgba(255,46,46,0.3);color:#fff;transform:translateY(-3px);box-shadow:0 6px 16px rgba(255,46,46,0.1)}
.items-grid .item:hover::before{opacity:1}

.contact-info{display:flex;flex-direction:column;gap:12px}
.contact-text{color:#d0d6dc !important;font-size:15px;line-height:1.6;margin:0}

.links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.links a{display:inline-flex;align-items:center;padding:10px 14px;border-radius:10px;background:linear-gradient(180deg,rgba(255,46,46,0.08),rgba(255,46,46,0.04));color:#fff;text-decoration:none;border:1px solid rgba(255,46,46,0.2);transition:all 220ms cubic-bezier(.2,.9,.2,1);font-size:14px;font-weight:500}
.links a:hover{color:#ff9999;box-shadow:0 8px 24px rgba(255,46,46,0.18);border-color:rgba(255,46,46,0.4);transform:translateY(-2px)}

/* scrollbar styling */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,rgba(255,46,46,0.6),rgba(100,200,255,0.6));border-radius:999px;transition:all 220ms ease}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,rgba(255,46,46,0.8),rgba(100,200,255,0.8))}

/* scroll progress indicator */
.scroll-progress{position:fixed;top:0;left:0;height:3px;background:linear-gradient(90deg,#ff3333,#ff6b6b,#64c8ff);width:0%;z-index:10000;transition:width 100ms linear}

@media (max-width:640px){.details{flex-direction:column}.avatar{width:72px;height:72px;font-size:28px}.links a{padding:8px 10px;font-size:13px}.items-grid{grid-template-columns:1fr}.friends-list{grid-template-columns:1fr;padding:20px}}

/* preloader / reload bar with enhanced styling */
.preloader{position:fixed;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:28px;pointer-events:none;z-index:9999}
.preloader-inner{width:min(740px,94%);height:14px;background:linear-gradient(90deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border-radius:999px;overflow:hidden;box-shadow:inset 0 2px 6px rgba(0,0,0,0.8), 0 8px 32px rgba(255,46,46,0.12);border:1px solid rgba(255,46,46,0.08)}
.preloader-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff3333,#ff6b6b,#ff9999);transition:width 0.6s cubic-bezier(.2,.9,.2,1);box-shadow:0 0 20px rgba(255,46,46,0.6), inset 0 1px 4px rgba(255,255,255,0.3);position:relative}
.preloader-bar::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.4),transparent);animation:shimmer 2s infinite}
@keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
.preloader[aria-hidden="true"]{opacity:0;transform:translateY(12px);transition:opacity 280ms cubic-bezier(.4,0,.2,1), transform 280ms cubic-bezier(.4,0,.2,1)}
.preloader[aria-hidden="false"]{opacity:1;transform:translateY(0)}

/* animated skill list */
.details li{transition:transform 360ms cubic-bezier(.2,.9,.2,1), color 260ms}
.details li:hover{transform:translateX(6px);color:#fff}

/* subtle parallax for header */
.header{backdrop-filter: blur(6px) saturate(0.9);background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));position:relative}
.header::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 20% 50%, rgba(255,46,46,0.02) 0%, transparent 60%);pointer-events:none;border-radius:14px}