:root{--bg: #0f172a;--card: #111827;--text: #e5e7eb;--muted: #9ca3af;--primary: #22c55e;--accent: #06b6d4;--ring: rgba(34, 197, 94, .35);--grad-start: #0ea5e9;--grad-end: #22c55e;--hairline: rgba(148, 163, 184, .14);--header-h: 64px;--space-4: 4px;--space-6: 6px;--space-8: 8px;--space-10: 10px;--space-12: 12px;--space-16: 16px;--space-20: 20px;--space-24: 24px;--space-28: 28px;--space-32: 32px;--space-40: 40px;--space-48: 48px}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:Cairo,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}a{color:inherit;text-decoration:none}.container{max-width:1160px;margin:0 auto;padding:var(--space-16)}.grid{display:grid;gap:var(--space-20)}.contact-grid{grid-template-columns:1fr 1fr}@media (max-width: 768px){.contact-grid{grid-template-columns:1fr}}.section{padding-block:var(--space-32);position:relative}.section.compact{padding-block:var(--space-24)}.section+.section{padding-top:var(--space-24)}.section+.section:before{content:"";position:absolute;top:0;left:50%;transform:translate(-50%);width:min(92%,1120px);height:1px;background:linear-gradient(90deg,transparent,var(--hairline),transparent);pointer-events:none}.section-header{margin:0 0 var(--space-16)}.btn{background:var(--primary);color:#081018;border:none;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:700;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}.btn.secondary{background:var(--accent)}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px var(--ring)}.btn:active{transform:translateY(0)}.btn.outline{background:transparent;color:var(--text);border:1px solid #2b3443}.btn.outline:hover{border-color:#3a475c}.card{background:var(--card);border:1px solid #1f2937;border-radius:12px;padding:16px}.muted{color:var(--muted)}.site-header{position:sticky;top:0;z-index:120;background:#0b1220d9;-webkit-backdrop-filter:saturate(120%) blur(6px);backdrop-filter:saturate(120%) blur(6px)}.site-nav{display:flex;gap:14px}.site-nav.desktop{display:flex}.mobile-nav,.nav-toggle{display:none}@media (max-width: 768px){.site-nav.desktop{display:none}.nav-toggle{display:inline-flex;align-items:center;gap:6px;background:#ffffff0a;color:#fff;border:1px solid #1f2937;padding:8px 12px;border-radius:10px;cursor:pointer;font-weight:700;font-size:14px}.nav-toggle:hover{background:#ffffff12}.nav-toggle.active{border-color:#22c55e73;box-shadow:0 0 0 2px #22c55e26 inset}.mobile-nav{display:grid;gap:10px;padding:10px 16px 16px;background:#0b1220;border-bottom:1px solid #1f2937;box-shadow:0 14px 28px -18px #00000073;max-height:0;overflow:hidden;transition:max-height .25s ease}.mobile-nav.open{max-height:480px}.mobile-nav a{padding:10px 12px;border:1px solid #1f2937;border-radius:8px;background:#ffffff0a}}input,textarea{width:100%;padding:10px;border-radius:8px;border:1px solid #374151;background:#0b1220;color:var(--text)}label{display:block;margin:10px 0 6px}.hero{position:relative;overflow:hidden;border-radius:16px;padding:32px;background:radial-gradient(80% 120% at 120% -20%,rgba(34,197,94,.12),transparent 60%),radial-gradient(80% 120% at -20% 120%,rgba(14,165,233,.12),transparent 60%),linear-gradient(180deg,#ffffff0a,#fff0 30%);border:1px solid #1f2937;transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;will-change:transform,box-shadow}.hero h1{margin:0 0 8px;font-size:clamp(24px,3.2vw,42px);line-height:1.2}.hero p{margin:0}.hero.center{text-align:center;padding:48px 28px}.hero{margin-bottom:var(--space-20)}.section-wrap .row{overflow-x:auto;-webkit-overflow-scrolling:touch}.section-wrap .row::-webkit-scrollbar{display:none}.hero .row{justify-content:center}.avatar-wrap{position:relative;width:200px;height:200px;border-radius:50%;margin:8px auto 14px;border:2px solid transparent;background:linear-gradient(#0b1220,#0b1220) padding-box,conic-gradient(from 180deg,var(--grad-start),var(--grad-end),var(--grad-start)) border-box;box-shadow:0 14px 40px -16px #0000008c,0 0 0 6px #0ea5e90f,0 0 34px #22c55e14;overflow:hidden}.avatar-img{width:100%;height:100%;object-fit:cover;display:block}.avatar-fallback{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(60% 60% at 50% 40%,rgba(14,165,233,.2),transparent),radial-gradient(60% 60% at 50% 60%,rgba(34,197,94,.18),transparent);color:#dbeafe;font-weight:800;font-size:40px}.blob{position:absolute;border-radius:50%;filter:blur(24px);opacity:.35;pointer-events:none;mix-blend-mode:screen}.blob.one{width:220px;height:220px;right:10%;top:-40px;background:radial-gradient(circle at 30% 30%,var(--grad-start),transparent 70%);animation:float1 8s ease-in-out infinite}.blob.two{width:180px;height:180px;left:8%;bottom:-30px;background:radial-gradient(circle at 70% 70%,var(--grad-end),transparent 70%);animation:float2 9s ease-in-out infinite}@keyframes float1{0%{transform:translateY(0)}50%{transform:translateY(16px)}to{transform:translateY(0)}}@keyframes float2{0%{transform:translateY(0)}50%{transform:translateY(-18px)}to{transform:translateY(0)}}.row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.badges{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-8);justify-content:center}.pill{border:1px solid #2a3445;color:var(--muted);padding:4px 10px;border-radius:999px;font-size:12px;background:#ffffff05}.pill.good{border-color:#22c55e59;color:#8bffb7;background:#22c55e0f}.pill.info{border-color:#0ea5e959;color:#9fe0ff;background:#0ea5e90f}.section-title{margin:var(--space-24) 0 var(--space-12);font-size:20px}h1{font-size:clamp(26px,3.5vw,40px);line-height:1.25;margin:0 0 var(--space-12)}h2{font-size:clamp(20px,2.6vw,28px);line-height:1.3;margin:0 0 var(--space-10, 10px)}h3{font-size:clamp(18px,2.2vw,22px);line-height:1.35;margin:0 0 var(--space-8)}p{font-size:16px;line-height:1.7}@keyframes fadeInUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}.a-fade{animation:fadeInUp .4s ease both}.delay-1{animation-delay:.06s}.delay-2{animation-delay:.12s}.delay-3{animation-delay:.18s}.link{color:#9fe0ff;text-decoration:underline;text-underline-offset:3px}.link:hover{color:#c2ecff}.hidden{display:none!important}.tilt{transition:transform .25s ease,box-shadow .25s ease;transform-style:preserve-3d}.tilt:hover{transform:perspective(700px) rotateX(3deg) rotateY(-3deg) translateY(-4px);box-shadow:0 22px 50px -20px #00000080}.reveal{opacity:0;transform:translateY(12px);transition:opacity .6s ease,transform .6s ease}.reveal.show{opacity:1;transform:translateY(0)}.skeleton{background:linear-gradient(90deg,#0c1322 25%,#0f1626 37%,#0c1322 63%);background-size:400% 100%;animation:shimmer 1.2s ease-in-out infinite;border-radius:8px}@keyframes shimmer{0%{background-position:100% 0}to{background-position:0 0}}.btn:hover{filter:brightness(1.05)}.btn.pulse{animation:btnPulse 2.4s ease-in-out infinite}@keyframes btnPulse{0%,to{box-shadow:0 0 #22c55e00}50%{box-shadow:0 0 0 10px #22c55e1a}}.card.interactive{transition:transform .18s ease,box-shadow .25s ease,border-color .25s ease}.card.interactive:hover{transform:translateY(-4px);box-shadow:0 16px 40px -20px #22c55e59;border-color:#22c55e73}.meter{height:8px;background:#0b1220;border:1px solid #1f2937;border-radius:999px;overflow:hidden}.meter-fill{height:100%;background:linear-gradient(90deg,var(--grad-start),var(--grad-end));box-shadow:inset 0 0 12px #ffffff0f}nav a{position:relative;display:inline-block;color:#fff;text-decoration:none}nav a:after{display:none!important}nav a:hover:after{transform:none}nav a:link,nav a:visited,nav a:hover,nav a:active{color:#fff;text-decoration:none}nav a.active{color:var(--primary)!important}footer{position:static;background:#0b1220;border-top:1px solid #1f2937}.avatar-wrap{transition:transform .25s ease}.avatar-wrap:hover{transform:translateY(-3px) scale(1.02)}@media (max-width: 768px){body{padding-top:0}.container{padding:var(--space-14, 14px)}.grid{gap:var(--space-16)}.site-nav.desktop{display:none}.nav-toggle{display:inline-flex;background:transparent;border:0;padding:8px;border-radius:8px;cursor:pointer}.nav-toggle .bar{display:block;width:22px;height:2px;margin:4px 0;background:var(--text);transition:transform .2s ease,opacity .2s ease}.nav-toggle.active .bar:nth-child(1){transform:translateY(6px) rotate(45deg)}.nav-toggle.active .bar:nth-child(2){opacity:0}.nav-toggle.active .bar:nth-child(3){transform:translateY(-6px) rotate(-45deg)}.mobile-nav{display:grid;gap:10px;padding:10px 16px 16px;background:#0b1220;border-bottom:1px solid #1f2937;box-shadow:0 14px 28px -18px #00000073;max-height:0;overflow:hidden;transition:max-height .25s ease}.mobile-nav.open{max-height:480px}.mobile-nav a{padding:10px 12px;border:1px solid #1f2937;border-radius:8px;background:#ffffff0a}.hero.center{padding:36px 18px}.hero{margin-bottom:var(--space-20)}.project-overlay{opacity:1;transform:none}.section-title{margin:var(--space-20) 0 var(--space-10, 10px)}h1{font-size:clamp(22px,4.2vw,30px)}h2{font-size:clamp(18px,3.2vw,24px)}h3{font-size:clamp(16px,2.8vw,20px)}p{font-size:15px;line-height:1.75}}@media (max-width: 480px){.container{padding:12px}.grid{gap:12px}.card{padding:14px}.btn{padding:9px 14px;font-size:14px}.hero.center{padding:28px 14px}.hero h1{font-size:22px}.avatar-wrap{width:140px;height:140px}.ring{width:72px;height:72px}.ring:after{top:8px;right:8px;bottom:8px;left:8px}.badges{gap:6px}.pill{padding:3px 8px;font-size:11px}.blob.one{width:160px;height:160px;top:-30px;right:8%}.blob.two{width:140px;height:140px;bottom:-24px;left:6%}.section-wrap{padding:12px}}@media (max-width: 400px){.hero .row .btn{width:100%;display:block;text-align:center}.hero .row{gap:8px;align-items:stretch}}.ring{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;position:relative;box-shadow:0 8px 28px -14px #00000073}.ring:after{content:"";position:absolute;top:10px;right:10px;bottom:10px;left:10px;background:#0b1220;border-radius:50%;border:1px solid #1f2937}.ring .ring-label{position:relative;font-weight:800}.project-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}.project-spotlight{position:relative;overflow:hidden}.project-media img{display:block}.project-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px;background:linear-gradient(180deg,transparent,rgba(8,16,24,.3) 30%,rgba(8,16,24,.75));opacity:0;transform:translateY(6px);transition:opacity .25s ease,transform .25s ease;z-index:1}.project-media:hover .project-overlay,.project-spotlight .project-overlay{opacity:1;transform:translateY(0)}.btn.outline.active{border-color:var(--primary);color:#c7f9d4}.thumb.active{outline:2px solid var(--primary);outline-offset:0}.social-links.icons .icon-btn{display:inline-grid;place-items:center;border-radius:999px;background:#ffffff0f;border:1px solid #1f2937;color:#e5e7eb;font-weight:800;font-size:12px;transition:background .2s ease,transform .15s ease,box-shadow .2s ease,border-color .2s ease}.social-links.icons .icon-btn:hover{background:#ffffff1a;transform:translateY(-1px);box-shadow:0 8px 24px -10px #22c55e40;border-color:#22c55e59}.social-links.icons .icon-btn:active{transform:translateY(0)}.social-links.list .link-row{display:inline-flex;align-items:center;gap:8px}.icon-badge{background:#ffffff0f;border:1px solid #1f2937}.icon-btn.facebook:hover,.icon-badge.facebook{box-shadow:0 0 #3b599800}.icon-btn.instagram:hover,.icon-badge.instagram{box-shadow:0 0 #e1306c00}.icon-btn.linkedin:hover,.icon-badge.linkedin{box-shadow:0 0 #0077b500}.icon-btn.github:hover,.icon-badge.github{box-shadow:0 0 #fff0}.icon-btn.telegram:hover,.icon-badge.telegram{box-shadow:0 0 #08c0}.icon-btn.tiktok:hover,.icon-badge.tiktok{box-shadow:0 0 #fe2c5500}.icon-btn.whatsapp:hover,.icon-badge.whatsapp{box-shadow:0 0 #25d36600}.social-links.grid{margin-top:8px}.social-card{display:grid;grid-template-rows:auto 1fr;align-content:center;justify-items:center;gap:8px;padding:14px 10px;border:1px solid #1f2937;border-radius:12px;background:linear-gradient(180deg,#ffffff0a,#ffffff05);color:var(--text);text-align:center;position:relative;overflow:hidden;transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease}.social-card:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:radial-gradient(60% 60% at 50% 0%,rgba(34,197,94,.08),transparent 70%);pointer-events:none;opacity:0;transition:opacity .22s ease}.social-card:hover,.social-card:focus-visible{transform:translateY(-3px);box-shadow:0 16px 40px -24px #00000080;border-color:#22c55e59}.social-card:hover:after,.social-card:focus-visible:after{opacity:1}.social-card-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#ffffff0f;border:1px solid #1f2937;box-shadow:0 8px 24px -12px #00000073 inset;will-change:transform,box-shadow}@keyframes iconFloat{0%,to{transform:translateY(0) scale(1);box-shadow:0 8px 24px -12px #00000073 inset}50%{transform:translateY(-2px) scale(1.03);box-shadow:0 10px 26px -12px #0000007a inset}}@media (hover: none) and (pointer: coarse){.social-links.grid .social-card-icon{animation:iconFloat 6.8s ease-in-out infinite}.social-links.grid .social-card:nth-child(2n) .social-card-icon{animation-delay:.9s}.social-links.grid .social-card:nth-child(3n) .social-card-icon{animation-delay:1.6s}.social-links.grid .social-card:nth-child(5n) .social-card-icon{animation-delay:2.3s}}@media (prefers-reduced-motion: reduce){.social-links.grid .social-card-icon{animation:none!important}}.social-card-label{font-weight:700;font-size:14px}.social-card.facebook:hover{box-shadow:0 18px 40px -18px #3b599873}.social-card.instagram:hover{box-shadow:0 18px 40px -18px #e1306c73}.social-card.linkedin:hover{box-shadow:0 18px 40px -18px #0077b573}.social-card.github:hover{box-shadow:0 18px 40px -18px #ffffff40}.social-card.telegram:hover{box-shadow:0 18px 40px -18px #0088cc73}.social-card.tiktok:hover{box-shadow:0 18px 40px -18px #fe2c5573}.social-card.whatsapp:hover{box-shadow:0 18px 40px -18px #25d36673}