:root{--bg-dark:#050505;--card-bg:rgba(20,20,22,0.6);--card-border:rgba(255,255,255,0.08);--accent-blue:#3b82f6;--accent-purple:#8b5cf6;--text-main:#ffffff;--text-dim:#9ca3af}body{margin:0;padding:0;background-color:var(--bg-dark);font-family:Inter,system-ui,sans-serif;color:var(--text-main);overflow-x:hidden}.main-wrapper{min-height:100vh;width:100%;display:flex;justify-content:center;align-items:center;padding:2rem 1rem;position:relative}.bg-noise{position:absolute;inset:0;opacity:.04;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='1'/%3E%3C/svg%3E");pointer-events:none;z-index:0}.bg-gradient-orb{top:-1%;right:-5%;width:600px;height:600px;background:radial-gradient(circle,rgba(59,130,246,.2),transparent 70%)}.bg-gradient-orb,.bg-gradient-orb-2{position:absolute;filter:blur(80px);z-index:0}.bg-gradient-orb-2{bottom:-10%;left:-5%;width:500px;height:500px;background:radial-gradient(circle,rgba(139,92,246,.15),transparent 70%)}.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto auto;gap:1.25rem;width:100%;max-width:1000px;z-index:1}.card{background:var(--card-bg);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--card-border);border-radius:24px;padding:1.75rem;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.25,.8,.25,1);box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -1px rgba(0,0,0,.06)}.card:hover{border-color:rgba(255,255,255,.2);transform:translateY(-5px);box-shadow:0 20px 25px -5px rgba(0,0,0,.3),0 10px 10px -5px rgba(0,0,0,.1)}.profile-hero{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between}.status-badge{display:inline-flex;align-items:center;gap:8px;background:rgba(34,197,94,.1);color:#4ade80;padding:6px 12px;border-radius:99px;font-size:.75rem;font-weight:600;margin-bottom:1rem;border:1px solid rgba(34,197,94,.2)}.pulsing-dot{width:6px;height:6px;background:#4ade80;border-radius:50%;box-shadow:0 0 0 0 rgba(74,222,128,.7);animation:pulse-green 2s infinite}.hero-name{font-size:2.25rem;margin:0;font-weight:800;letter-spacing:-.03em;color:white}.hero-role{font-size:1.25rem;color:var(--text-dim);margin:.25rem 0 1rem;font-weight:500}.text-gradient{background:linear-gradient(135deg,#60a5fa,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-bio{font-size:.95rem;color:#a1a1aa;line-height:1.6}.hero-image-wrapper{margin-top:1.5rem;display:flex;justify-content:center}.safwan-img{border-radius:20px;object-fit:cover;transition:transform .5s ease;border:1px solid rgba(255,255,255,.1)}.tech-stack{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;position:relative;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)}.section-label{font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:1rem;text-align:center}.marquee-wrapper{display:flex;overflow:hidden;width:100%;margin-bottom:.8rem}.marquee-content{display:flex;gap:1rem;flex-shrink:0}.scroll-left{animation:scrollLeft 25s linear infinite}.scroll-right{animation:scrollRight 25s linear infinite}.tag{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);padding:8px 16px;border-radius:8px;white-space:nowrap;font-size:.85rem;font-weight:500;color:#e2e8f0;transition:.3s}.tag:hover{background:rgba(255,255,255,.15);border-color:var(--accent-blue);transform:scale(1.05)}.action-card{text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;min-height:160px}.action-card .icon-box{width:44px;height:44px;background:rgba(255,255,255,.05);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.action-text h3{font-size:1.1rem;margin:0;color:white}.action-text span{font-size:.8rem;color:var(--text-dim)}.arrow-icon{position:absolute;top:1.5rem;right:1.5rem;color:var(--text-dim);transition:.3s}.action-card:hover .arrow-icon{color:white;transform:translate(2px,-2px)}.email-card:hover{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.05)}.whatsapp-card:hover{border-color:rgba(34,197,94,.5);background:rgba(34,197,94,.05)}.phone-card:hover{border-color:rgba(168,85,247,.5);background:rgba(168,85,247,.05)}.location-card{display:flex;flex-direction:column;justify-content:center;align-items:center;background:black;border-color:#222}.location-card p{margin:0;font-size:.9rem;color:#888}.location-card .copyright{font-size:.75rem;color:#555;margin-top:5px}@keyframes scrollLeft{0%{transform:translateX(0)}to{transform:translateX(-50%)}}@keyframes scrollRight{0%{transform:translateX(-50%)}to{transform:translateX(0)}}@keyframes pulse-green{0%{box-shadow:0 0 0 0 rgba(74,222,128,.4)}70%{box-shadow:0 0 0 6px rgba(74,222,128,0)}to{box-shadow:0 0 0 0 rgba(74,222,128,0)}}@media (max-width:768px){.bento-grid{grid-template-columns:1fr;max-width:400px}.action-card,.edu-stack,.location-card,.profile-hero,.tech-stack{grid-column:span 1;grid-row:auto}.hero-name{font-size:2rem}.action-card{min-height:100px;flex-direction:row;align-items:center}.action-text{margin-left:1rem;flex-grow:1}.action-card .icon-box{margin-bottom:0}.arrow-icon{position:relative;top:auto;right:auto}}.edu-stack{grid-column:span 2;display:flex;flex-direction:column;justify-content:center;mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,black 10%,black 90%,transparent)}.tag.edu.physics{border-color:rgba(59,130,246,.4);color:#93c5fd}.tag.edu.chemistry{border-color:rgba(34,197,94,.4);color:#86efac}.tag.edu.math{border-color:rgba(168,85,247,.4);color:#d8b4fe}.tag.edu:hover{transform:scale(1.08)}@media (max-width:768px){.bento-grid{grid-template-columns:1fr!important;grid-auto-rows:auto;max-width:100%}.action-card,.edu-stack,.location-card,.profile-hero,.tech-stack{grid-column:1/-1!important;grid-row:auto!important}.edu-stack,.tech-stack{mask-image:none!important;-webkit-mask-image:none!important}.marquee-wrapper{overflow:hidden}.marquee-content{min-width:max-content}.profile-hero{padding:1.5rem}.hero-content{text-align:center}.hero-image-wrapper{margin-top:1rem}.safwan-img{width:160px!important;height:160px!important}.action-card{flex-direction:row;align-items:center;gap:1rem;min-height:auto;padding:1.25rem}.action-text{margin-left:0;flex-grow:1}.arrow-icon{position:static;transform:none}.scroll-left,.scroll-right{animation-duration:40s}}